* {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:root {
    --primary-color: #ffd000;
    /* Light mode variables */
    --bg-color: #f7fafc;
    --container-bg: #ffffff;
    --text-color: #2d3748;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --hero-bg: #1a202c;
    --hero-text: #ffffff;
    --console-bg: #2d3748;
    --console-text: #a0aec0;
    --button-text: #2d3748;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: var(--container-bg);
    --modal-border: 1px solid var(--border-color);
    --option-hover-bg: color-mix(in srgb, var(--primary-color), transparent 80%);
    --option-active-bg: color-mix(in srgb, var(--primary-color), transparent 20%);
    --icon-size: 10em;
    --option-size: 200px;
    --option-gap: 1rem;
    --icon-color: var(--primary-color);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg-color: #1a202c;
		--container-bg: #2d3748;
		--text-color: #f7fafc;
		--text-muted: #a0aec0;
		--border-color: #4a5568;
		--hero-bg: #111827;
		--hero-text: #ffffff;
		--console-bg: #1a202c;
		--console-text: #e2e8f0;
		--button-text: #2d3748;
		--shadow-color: rgba(0, 0, 0, 0.25);
	}
}

/* Manual dark mode override */
:root[data-theme='dark'] {
	--bg-color: #1a202c;
	--container-bg: #2d3748;
	--text-color: #f7fafc;
	--text-muted: #a0aec0;
	--border-color: #4a5568;
	--hero-bg: #111827;
	--hero-text: #ffffff;
	--console-bg: #1a202c;
	--console-text: #e2e8f0;
	--button-text: #2d3748;
	--shadow-color: rgba(0, 0, 0, 0.25);
}

.theme-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	background: var(--container-bg);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 1000;
	padding: 0;
}

.theme-toggle:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px var(--shadow-color);
}

.theme-toggle svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}


.login-qr {
    position: fixed;
    top: calc(2rem + 40px);
    right: 1rem;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
    &:hover {
        transform: scale(1.1);
        box-shadow: 0 0 10px var(--shadow-color);
    }
    &.show {
        display: flex;
    }
}
body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;
	transition: background-color 0.3s ease;
     > custom-loader {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        color: #ffd000;
        opacity: 1;
        transition: opacity 1s;
        z-index: 1;
        font-family: Panton, sans-serif;
        justify-content: center;
        display: flex;
        align-items: center;
        font-size: 4vw;
    }
	>div.w43 {
		max-width: 800px;
		margin: 2rem auto;
		padding: 2rem;
		background: var(--container-bg);
		border-radius: 1rem;
		box-shadow: 0 4px 6px var(--shadow-color);

		>div {
			&:nth-of-type(1) {
				/* hero */
				text-align: center;
				padding: 2.5rem 0;
				background: var(--hero-bg);
				color: var(--hero-text);
				border-radius: 1rem 1rem 0 0;
				margin: -2rem -2rem 2rem -2rem;

				w43-logo {
					font-size: 3rem;
					margin-bottom: 1rem;
					display: block;
					--fill-color: var(--hero-text);
					--accent-color: var(--primary-color);
				}

				h1 {
					font-weight: 700;
					margin: 0;
					font-size: 2rem;
				}

				>div {
					/* icon-container */
					position: relative;
					width: 48px;
					height: 48px;
					margin: 0 auto 1.5rem;
					filter: drop-shadow(0 0 10px rgba(255, 208, 0, 0.3));

					>svg {
						/* icon */
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 2;
						animation: float 3s ease-in-out infinite;

						>path {
							fill: var(--primary-color);
						}
					}

					>div {
						&:nth-of-type(1) {
							/* data-stream */
							position: absolute;
							left: 80%;
							top: 42%;
							height: 2px;
							width: 80px;
							background: linear-gradient(to right, var(--primary-color) 0%, rgba(255, 208, 0, 0) 100%);
							transform: translateY(-50%);
							z-index: 1;
						}

						&:nth-of-type(2) {
							/* haze */
							position: absolute;
							left: 78%;
							top: 41%;
							width: 80px;
							height: 20px;
							background: radial-gradient(ellipse at left, rgba(255, 208, 0, 0.15), rgba(255, 208, 0, 0));
							transform: translateY(-50%);
							pointer-events: none;
							border-top-right-radius: 100%;
							border-bottom-right-radius: 100%;
						}

						&:nth-of-type(3) {

							/* data-bits */
							>span {
								/* individual bit */
								position: absolute;
								top: 42%;
								left: 75%;
								font-family: monospace;
								font-size: 12px;
								color: var(--primary-color);
								transform: translateY(-50%);
								animation: flow-right 2s linear infinite;
								opacity: 0;

								&:nth-child(1) {
									animation-delay: 0s;
								}

								&:nth-child(2) {
									animation-delay: 0.3s;
								}

								&:nth-child(3) {
									animation-delay: 0.6s;
								}

								&:nth-child(4) {
									animation-delay: 0.9s;
								}

								&:nth-child(5) {
									animation-delay: 1.2s;
								}

								&:nth-child(6) {
									animation-delay: 1.5s;
								}
							}
						}
					}
				}
			}

			&:nth-of-type(2) {
				/* download-info */
				background: var(--bg-color);
				padding: 1.5rem;
				border-radius: 0.5rem;
				margin: 1.5rem 0;
				border: 1px solid var(--border-color);

				>div
                {
                    /* console-output */
                    font-family: 'SF Mono', 'Consolas', monospace;
                    white-space: pre-wrap;
                    padding: 1rem;
                    background: var(--console-bg);
                    color: var(--console-text);
                    border-radius: 0.5rem;
                    margin: 1rem 0;
                    display: none;
                    border: 1px solid var(--border-color);
                    &#progress-container
                    {
                        white-space: normal;
                        > .progress-wrapper
                        {
                            margin-bottom: 1em;
                            > progress
                            {
                                display: block;
                                clear: both;
                            }
                        }
                    }
                }

				>button {
					/* download-button */
					background: var(--primary-color);
					color: var(--button-text);
					border: none;
					padding: 1rem 2rem;
					border-radius: 0.5rem;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.2s ease;
					display: inline-block;
					margin: 1rem 0 0 0;
					text-decoration: none;

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 4px 12px rgba(255, 208, 0, 0.25);
					}
				}
			}

			&:nth-of-type(3) {
				/* referral-program */
				margin-top: 3rem;
				padding: 2rem;
				background: var(--hero-bg);
				color: var(--hero-text);
				border-radius: 1rem;
				border: 1px solid var(--border-color);

				>div {
					display: block;
					margin: 2rem auto;
					padding: 2rem;
					/*background: var(--container-bg);*/

					background: var(--bg-color);
					color: var(--text-color);
					border-radius: 1rem;
					box-shadow: 0 4px 6px var(--shadow-color);
				}

				>h2 {
					color: var(--primary-color);
					font-weight: 700;
					margin-top: 0;

					>span {
						color: var(--hero-text);
					}
				}

				>a {
					/* download-button */
					background: var(--primary-color);
					color: var(--button-text);
					border: none;
					padding: 1rem 2rem;
					border-radius: 0.5rem;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.2s ease;
					display: inline-block;
					margin: 1rem 0 0 0;
					text-decoration: none;

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 4px 12px rgba(255, 208, 0, 0.25);
					}

					>w43-logo {
						--fill-color: #000;
						--accent-color: #fff;
					}
				}
			}

			&:nth-of-type(4) {
				/* powered-by */
				text-align: center;
				margin-top: 2rem;
				color: var(--text-muted);

				a {
					color: var(--text-color);
					text-decoration: none;
					display: inline-flex;
					align-items: baseline;
					gap: 0.5rem;
					line-height: 1;
				}

				w43-logo {
					font-size: 1.5rem;
					display: inline-block;
					position: relative;
					top: 0.1em;
					--fill-color: var(--text-color);
					--accent-color: var(--primary-color);
				}
			}
		}
	}
}

p {
	margin: 0;

	&+p {
		margin-top: 1em;
	}

	>span {
		color: var(--primary-color);
		font-weight: bold;
	}

}

h1 {
	color: var(--primary-color);
}

h2 {
	color: var(--text-color);
}

@keyframes fall {
	0% {
		transform: translate(-50%, -20px);
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translate(-50%, 60px);
		opacity: 0;
	}
}

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

	50% {
		transform: translateY(-6px);
	}

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

@keyframes download {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

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

@keyframes flow-right {
	0% {
		transform: translate(0, -50%);
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translate(60px, -50%);
		opacity: 0;
	}
}

cite {
	float: right;

	&::before {
		content: '— ';
	}
}


/** {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:root {
    --primary-color: #ffd000;*/
    /* Light mode variables */
    /*--bg-color: #f7fafc;
    --container-bg: #ffffff;
    --text-color: #2d3748;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --hero-bg: #1a202c;
    --hero-text: #ffffff;
    --console-bg: #2d3748;
    --console-text: #a0aec0;
    --button-text: #2d3748;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg-color: #1a202c;
        --container-bg: #2d3748;
        --text-color: #f7fafc;
        --text-muted: #a0aec0;
        --border-color: #4a5568;
        --hero-bg: #111827;
        --hero-text: #ffffff;
        --console-bg: #1a202c;
        --console-text: #e2e8f0;
        --button-text: #2d3748;
        --shadow-color: rgba(0, 0, 0, 0.25);
    }
}*/

/* Manual dark mode override */
/*:root[data-theme='dark'] {
    --bg-color: #1a202c;
    --container-bg: #2d3748;
    --text-color: #f7fafc;
    --text-muted: #a0aec0;
    --border-color: #4a5568;
    --hero-bg: #111827;
    --hero-text: #ffffff;
    --console-bg: #1a202c;
    --console-text: #e2e8f0;
    --button-text: #2d3748;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--shadow-color);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease;
    > div
    {
        max-width: 800px;
        margin: 2rem auto;
        padding: 2rem;
        background: var(--container-bg);
        border-radius: 1rem;
        box-shadow: 0 4px 6px var(--shadow-color);
    > div
    {
        &:nth-of-type(1)
        {*/
            /* hero */
            /*text-align: center;
            padding: 2.5rem 0;
            background: var(--hero-bg);
            color: var(--hero-text);
            border-radius: 1rem 1rem 0 0;
            margin: -2rem -2rem 2rem -2rem;
            w43-logo
            {
                font-size: 3rem;
                margin-bottom: 1rem;
                display: block;
                --fill-color: var(--hero-text);
                --accent-color: var(--primary-color);
            }
            h1 {
                font-weight: 700;
                margin: 0;
                font-size: 2rem;
            }
            > div {*/
                /* icon-container */
                /*position: relative;
                width: 48px;
                height: 48px;
                margin: 0 auto 1.5rem;
                filter: drop-shadow(0 0 10px rgba(255, 208, 0, 0.3));
                >svg
                {*/
                    /* icon */
                    /*width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 2;
                    animation: float 3s ease-in-out infinite;
                    >path
                    {
                        fill: var(--primary-color);
                    }
                }
                > div 
                {
                    &:nth-of-type(1)
                    {*/
                        /* data-stream */
                        /*position: absolute;
                        left: 80%;
                        top: 42%;
                        height: 2px;
                        width: 80px;
                        background: linear-gradient(to right, var(--primary-color) 0%, rgba(255, 208, 0, 0) 100%);
                        transform: translateY(-50%);
                        z-index: 1;
                    }
                    &:nth-of-type(2) 
                    {*/
                        /* haze */
                        /*position: absolute;
                        left: 78%;
                        top: 41%;
                        width: 80px;
                        height: 20px;
                        background: radial-gradient(ellipse at left, rgba(255, 208, 0, 0.15), rgba(255, 208, 0, 0));
                        transform: translateY(-50%);
                        pointer-events: none;
                        border-top-right-radius: 100%;
                        border-bottom-right-radius: 100%;
                    }
                    &:nth-of-type(3) 
                    {*/
                        /* data-bits */
                        /*> span
                        {*/
                            /* individual bit */
                            /*position: absolute;
                            top: 42%;
                            left: 75%;
                            font-family: monospace;
                            font-size: 12px;
                            color: var(--primary-color);
                            transform: translateY(-50%);
                            animation: flow-right 2s linear infinite;
                            opacity: 0;
                            &:nth-child(1)
                            {
                                animation-delay: 0s;
                            }
                            &:nth-child(2) {
                                animation-delay: 0.3s;
                            }

                            &:nth-child(3) {
                                animation-delay: 0.6s;
                            }

                            &:nth-child(4) {
                                animation-delay: 0.9s;
                            }

                            &:nth-child(5) {
                                animation-delay: 1.2s;
                            }

                            &:nth-child(6) {
                                animation-delay: 1.5s;
                            }
                        }
                    }
                }
            }
        }
        &:nth-of-type(2) {*/
            /* download-info */
            /*background: var(--bg-color);
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin: 1.5rem 0;
            border: 1px solid var(--border-color);
            > div
            {*/
                /* console-output */
                /*font-family: 'SF Mono', 'Consolas', monospace;
                white-space: pre-wrap;
                padding: 1rem;
                background: var(--console-bg);
                color: var(--console-text);
                border-radius: 0.5rem;
                margin: 1rem 0;
                display: none;
                border: 1px solid var(--border-color);
            }
            > button {*/
                /* download-button */
                /*background: var(--primary-color);
                color: var(--button-text);
                border: none;
                padding: 1rem 2rem;
                border-radius: 0.5rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                display: inline-block;
                margin: 1rem 0 0 0;
                text-decoration: none;
                &:hover
                {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(255, 208, 0, 0.25);
                }
            }
        }
        &:nth-of-type(3) {*/
            /* referral-program */
            /*margin-top: 3rem;
            padding: 2rem;
            background: var(--hero-bg);
            color: var(--hero-text);
            border-radius: 1rem;
            border: 1px solid var(--border-color);
            > div
            {
                display: block;
                margin: 2rem auto;
                padding: 2rem;*/
                /*background: var(--container-bg);*/

                /*background: var(--bg-color);
                color: var(--text-color);
                border-radius: 1rem;
                box-shadow: 0 4px 6px var(--shadow-color);
            }
            >h2
            {
                color: var(--primary-color);
                font-weight: 700;
                margin-top: 0;
                >span
                {
                    color: var(--hero-text);
                }
            }
            > a {*/
                /* download-button */
                /*background: var(--primary-color);
                color: var(--button-text);
                border: none;
                padding: 1rem 2rem;
                border-radius: 0.5rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                display: inline-block;
                margin: 1rem 0 0 0;
                text-decoration: none;
                &:hover
                {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(255, 208, 0, 0.25);
                }
                > w43-logo {
                    --fill-color: #000;
                    --accent-color: #fff;
                }
            }
        }
        &:nth-of-type(4) {*/
            /* powered-by */
            /*text-align: center;
            margin-top: 2rem;
            color: var(--text-muted);
            a
            {
                color: var(--text-color);
                text-decoration: none;
                display: inline-flex;
                align-items: baseline;
                gap: 0.5rem;
                line-height: 1;
            }
            w43-logo {
                font-size: 1.5rem;
                display: inline-block;
                position: relative;
                top: 0.1em;
                --fill-color: var(--text-color);
                --accent-color: var(--primary-color);
            }
        }
    }
}
}

p {
    margin: 0;
    &+p

{
    margin-top: 1em;
}

> span {
    color: var(--primary-color);
    font-weight: bold;
}

}

h1 {
    color: var(--primary-color);
}

h2 {
    color: var(--text-color);
}

@keyframes fall {
    0% {
        transform: translate(-50%, -20px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 60px);
        opacity: 0;
    }
}

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

    50% {
        transform: translateY(-6px);
    }

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

@keyframes download {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes flow-right {
    0% {
        transform: translate(0, -50%);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(60px, -50%);
        opacity: 0;
    }
}
cite{
    float: right;
    &::before
    {
        content: '— ';
    }
}*/





/* === Modal Styles === */
#join-modal {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    &[hidden]
    {
        display: none;
    }
    &:not([hidden]) {
        opacity: 1;
        visibility: visible;
    }
    > div /* content */
    {
        background: var(--modal-bg);
        border: var(--modal-border);
        border-radius: 12px;
        padding: 1.5rem;
        width: min(90vw, 420px);
        box-shadow: 0 10px 25px var(--shadow-color);
        text-align: center;
        > h2 /* title */
        {
            margin: 0 0 1.25rem;
            font-size: 1.5em;
            color: var(--text-color);
            font-weight: 600;
        }
        > div /* options */
        {
            display: flex;
            gap: var(--option-gap);
            justify-content: center;
            margin-top: 1rem;
            flex-wrap: wrap;
            > button /* option */
            {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: var(--option-size);
                height: var(--option-size);
                padding: 0.75rem;
                background: transparent;
                border: 1.5px solid var(--border-color);
                border-radius: 12px;
                color: var(--text-color);
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
                gap: 0.5rem;
                &:hover 
                {
                    border-color: var(--primary-color);
                    background: var(--option-hover-bg);
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px var(--shadow-color);
                }
                &:active 
                {
                    transform: translateY(0);
                    background: var(--option-active-bg);
                }
                > svg 
                {
                    width: var(--icon-size);
                    height: var(--icon-size);
                    flex-shrink: 0;
                    color: var(--icon-color);
                }
                > span 
                {
                    display: block;
                    line-height: 1.2;
                    text-align: center;
                    > span
                    {
                        color: var(--primary-color);
                        font-weight: bold;
                    }
                }
            }
        }
    }
}