*, *::before, *::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html, body {
                height: 100%;
                font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
                background: #08080a;
                color: #e0dce8;
                overflow: hidden;
            }

            #bg-shader {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                display: block;
            }

            .blobs-container {
                position: fixed;
                inset: 0;
                z-index: 1;
                overflow: hidden;
                pointer-events: none;
            }

            .blob {
                position: absolute;
                border-radius: 50%;
                filter: url(#ferrofluid);
                opacity: 0;
            }

            .blob-1 {
                width: 400px;
                height: 400px;
                background: radial-gradient(circle, #666, #222);
                top: -15%;
                left: -10%;
                animation: bf1 25s ease-in-out infinite;
            }

            .blob-2 {
                width: 300px;
                height: 300px;
                background: radial-gradient(circle, #555, #1a1a1a);
                bottom: -20%;
                right: -8%;
                animation: bf2 28s ease-in-out infinite;
            }

            @keyframes bf1 {
                0%,100% {
                    transform: translate(0,0)scale(1);
                    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
                }

                25% {
                    border-radius: 40% 60% 70% 30%/40% 70% 30% 60%
                }

                50% {
                    transform: translate(60px,40px)scale(1.05);
                    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
                }

                75% {
                    border-radius: 30% 70% 40% 60%/70% 40% 60% 30%
                }
            }

            @keyframes bf2 {
                0%,100% {
                    transform: translate(0,0)scale(1);
                    border-radius: 40% 60% 70% 30%/50% 60% 40% 50%
                }

                25% {
                    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
                }

                50% {
                    transform: translate(-70px,-30px)scale(.9);
                    border-radius: 50% 50% 60% 40%/40% 60% 50% 50%
                }

                75% {
                    border-radius: 30% 70% 40% 60%/70% 40% 60% 30%
                }
            }

            .bg-overlay {
                position: fixed;
                inset: 0;
                z-index: 2;
                pointer-events: none;
            }

            .bg-overlay::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 50% 0%, rgba(40,40,60,0.04), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(30,30,50,0.02), transparent 50%);
            }

            .content {
                position: fixed;
                inset: 0;
                z-index: 10;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                padding: 1.5rem 2rem;
                overflow-y: auto;
            }

            .center-frame {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.6rem;
                max-width: 600px;
                width: 100%;
                padding: 1rem 0;
            }

            .server-name {
                font-size: clamp(2.6rem, 7vw, 4.5rem);
                font-weight: 800;
                letter-spacing: -0.03em;
                line-height: 1;
                text-align: center;
                color: #e8e0ff;
            }

            .tagline {
                font-size: clamp(0.7rem, 1.4vw, 0.85rem);
                color: #787090;
                font-weight: 300;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                position: relative;
                height: 1.4em;
                text-align: center;
            }

            .tagline span {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                opacity: 0;
                filter: blur(6px);
                transition: opacity 0.5s, filter 0.5s;
                white-space: nowrap;
            }

            .tagline span.active {
                opacity: 1;
                filter: blur(0);
            }

            .tagline span.out {
                opacity: 0;
                filter: blur(8px);
            }

            .windows-bar {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.5rem 0.8rem;
                background: rgba(10,10,18,0.65);
                border: 1px solid rgba(80,70,120,0.12);
                border-radius: 100px;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                opacity: 0;
                transform: translateY(16px);
                animation: cardIn 0.5s 0.8s forwards;
                width: 100%;
                overflow-x: auto;
            }

            .bar-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 100px;
                border: none;
                background: transparent;
                color: #787090;
                cursor: pointer;
                transition: all 0.25s;
                flex-shrink: 0;
            }

            .bar-icon svg {
                width: 18px;
                height: 18px;
            }

            .bar-icon:hover {
                background: rgba(107,92,231,0.12);
                color: #b0a8d8;
            }

            .bar-divider {
                width: 1px;
                height: 24px;
                background: rgba(80,70,120,0.15);
                flex-shrink: 0;
                margin: 0 0.2rem;
            }

            .bar-stats {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                flex-shrink: 0;
                padding: 0 0.3rem;
            }

            .bar-stats .stat {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                font-size: 0.7rem;
                color: #787090;
            }

            .bar-stats .stat svg {
                width: 12px;
                height: 12px;
                color: #6b5ce7;
            }

            .bar-stats .stat .num {
                font-weight: 600;
                color: #b0a8d8;
            }

            .btn-wrapper {
                flex-shrink: 0;
            }

            #shader-btn {
                position: relative;
                width: 160px;
                height: 36px;
                border: none;
                border-radius: 100px;
                cursor: pointer;
                outline: none;
                overflow: visible;
                padding: 0;
                background: transparent;
                box-shadow: 0 0 20px rgba(120,80,255,0.15), 0 0 50px rgba(120,80,255,0.05);
                transition: box-shadow 0.3s;
                perspective: 1000px;
            }

            #shader-btn:hover {
                box-shadow: 0 0 30px rgba(120,80,255,0.25), 0 0 70px rgba(120,80,255,0.1);
            }

            #shader-btn canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                border-radius: 100px;
                pointer-events: none;
            }

            #shader-btn .btn-inner {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.4rem;
                width: 100%;
                height: 100%;
                font-size: 0.78rem;
                font-weight: 600;
                color: #f0ecff;
                text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 12px rgba(120,80,255,0.2);
                pointer-events: none;
                letter-spacing: 0.02em;
                transform: translateZ(20px);
            }

            #shader-btn .btn-inner svg {
                width: 15px;
                height: 15px;
                filter: drop-shadow(0 0 4px rgba(120,80,255,0.3));
            }

            #shader-btn .btn-shim {
                position: absolute;
                top: 2px;
                left: 2px;
                right: 2px;
                bottom: 2px;
                border-radius: 100px;
                background: linear-gradient(180deg, #202020 0%, #000 100%);
                z-index: 1;
                transition: box-shadow 0.15s;
            }

            #shader-btn .btn-glow {
                position: absolute;
                inset: 0;
                border-radius: 100px;
                z-index: 0;
                transition: box-shadow 0.15s;
            }

            .ripple {
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
                pointer-events: none;
                animation: rippleAnim 0.6s ease-out;
            }

            @keyframes rippleAnim {
                0% {
                    transform: translate(-50%,-50%)scale(0);
                    opacity: 0.6
                }

                100% {
                    transform: translate(-50%,-50%)scale(4);
                    opacity: 0
                }
            }

            @keyframes cardIn {
                to {
                    opacity: 1;
                    transform: translateY(0)
                }
            }

            .desc {
                font-size: clamp(0.7rem, 1.4vw, 0.82rem);
                color: #8880a0;
                font-weight: 350;
                line-height: 1.5;
                text-align: center;
                max-width: 480px;
                opacity: 0;
                animation: cardIn 0.5s 0.55s forwards;
            }

            .info-box {
                width: 100%;
                background: rgba(8,8,16,0.4);
                border: 1px solid rgba(80,70,120,0.06);
                border-radius: 16px;
                padding: 0.7rem 1rem;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                opacity: 0;
                transform: translateY(8px);
                transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
                pointer-events: none;
            }

            .info-box.show {
                opacity: 1;
                transform: translateY(0);
            }

            .info-box .i-brand {
                font-size: 0.6rem;
                font-weight: 600;
                letter-spacing: 0.08em;
                color: rgba(120,80,255,0.3);
                text-transform: uppercase;
                margin-bottom: 0.25rem;
            }

            .info-box .i-title {
                font-size: 0.75rem;
                font-weight: 600;
                color: #c8c0e0;
                margin-bottom: 0.15rem;
            }

            .info-box .i-desc {
                font-size: 0.68rem;
                color: #787090;
                line-height: 1.4;
                min-height: 1.4em;
            }

            .widget-box {
                background: rgba(8,8,14,0.5);
                border: 1px solid rgba(80,70,120,0.08);
                border-radius: 24px;
                overflow: hidden;
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                opacity: 0;
                transform: translateY(16px);
                animation: cardIn 0.5s 1.2s forwards;
                width: 100%;
            }

            .widget-box iframe {
                display: block;
                width: 100%;
                height: 280px;
                border: none;
            }

            .brand-corner {
                position: fixed;
                top: 1.2rem;
                left: 1.5rem;
                z-index: 20;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 0.12em;
                color: rgba(120,112,144,0.25);
                text-transform: uppercase;
                opacity: 0;
                animation: cardIn 0.6s 2s forwards;
            }

            .footer-note {
                font-size: 0.6rem;
                color: rgba(160,151,184,0.65);
                text-align: center;
                margin-top: 0.2rem;
                opacity: 0;
                animation: cardIn 0.5s 1.5s forwards;
                letter-spacing: 0.05em;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 0.7rem;
            }

            .footer-note a {
                color: inherit;
                text-decoration: none;
                transition: color 0.2s;
            }

            .footer-note a:hover, .footer-note a:focus-visible {
                color: #e8e0ff;
            }

            .splash {
                position: fixed;
                inset: 0;
                z-index: 999;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #06060a;
                cursor: pointer;
                transition: opacity 0.8s ease, visibility 0.8s ease;
            }

            .splash.hide {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            .splash-title {
                font-size: clamp(2.8rem, 8vw, 5rem);
                font-weight: 800;
                letter-spacing: -0.03em;
                color: #e8e0ff;
                margin-bottom: 0.5rem;
            }

            .splash-sub {
                font-size: clamp(0.75rem, 1.5vw, 0.9rem);
                color: #787090;
                font-weight: 300;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                margin-bottom: 2rem;
            }

            .splash-prompt {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.7rem 1.8rem;
                border: 1px solid rgba(107,92,231,0.2);
                border-radius: 100px;
                font-size: 0.8rem;
                color: #a098c0;
                letter-spacing: 0.05em;
                transition: all 0.3s;
            }

            .splash-prompt svg {
                width: 16px;
                height: 16px;
                animation: splashPulse 2s ease-in-out infinite;
            }

            .splash:hover .splash-prompt {
                border-color: rgba(107,92,231,0.4);
                color: #d0c8e8;
            }

            @keyframes splashPulse {
                0%,100% {
                    opacity: 0.4;
                    transform: translateY(0)
                }

                50% {
                    opacity: 1;
                    transform: translateY(3px)
                }
            }

            .splash-bg {
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 50% 40%, rgba(60,40,120,0.06), transparent 60%);
            }

            .splash-fade-in {
                opacity: 0;
                animation: splashFade 1s 0.3s ease-out forwards;
            }

            .splash-sub.splash-fade-in {
                animation-delay: 0.5s;
            }

            .splash-prompt.splash-fade-in {
                animation-delay: 0.8s;
            }

            .ferrofluid-filter {
                position: absolute;
            }

            @keyframes splashFade {
                to {
                    opacity: 1
                }
            }

            @media (max-width: 600px) {
                .content {
                    padding: 0.8rem 1rem;
                }

                .center-frame {
                    gap: 0.4rem;
                }

                .windows-bar {
                    padding: 0.3rem 0.5rem;
                    gap: 0.2rem;
                    flex-wrap: wrap;
                }

                .bar-icon {
                    width: 28px;
                    height: 28px;
                }

                .bar-icon svg {
                    width: 14px;
                    height: 14px;
                }

                #shader-btn {
                    width: 120px;
                    height: 30px;
                }

                #shader-btn .btn-inner {
                    font-size: 0.65rem;
                }

                #shader-btn .btn-inner svg {
                    width: 12px;
                    height: 12px;
                }

                .widget-box iframe {
                    height: 240px;
                }
            }

            .server-logo {
                width: 60px;
                height: auto;
                margin-bottom: 0.15rem;
                opacity: 0;
                animation: cardIn 0.5s 0.3s forwards
            }