* {
        box-sizing: border-box
    }

    html,
    body {
        overflow-x: hidden;
        scroll-behavior: smooth
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        transition: background .3s, color .3s
    }

    .dark body {
        background: #060911;
        color: #e5e7eb
    }

    .dark .tc {
        background: rgba(17, 24, 39, .6);
        border-color: rgba(255, 255, 255, .07)
    }

    .dark .tc:hover {
        background: rgba(26, 34, 53, .8);
        border-color: rgba(245, 158, 11, .15)
    }

    .dark .tg {
        background: rgba(17, 24, 39, .75);
        border-color: rgba(255, 255, 255, .06);
        backdrop-filter: blur(16px)
    }

    .dark .ts {
        background: linear-gradient(180deg, #0a0e1a, #0f1629, #0a0e1a);
        border-color: rgba(255, 255, 255, .04)
    }

    .dark .tt {
        color: #e5e7eb
    }

    .dark .tm {
        color: #9ca3af
    }

    .dark .td {
        color: #6b7280
    }

    .dark .tb {
        border-color: rgba(255, 255, 255, .05)
    }

    .dark .ti {
        background: rgba(255, 255, 255, .05);
        border-color: rgba(255, 255, 255, .05);
        color: #fff
    }

    .dark .th:hover {
        background: rgba(255, 255, 255, .05)
    }

    .dark .tx {
        background: rgba(255, 255, 255, .03)
    }

    .dark .tx:hover {
        background: rgba(255, 255, 255, .06)
    }

    body {
        background: #f5f7fb;
        color: #1e293b
    }

    .tc {
        background: #fff;
        border: 1px solid #e5e7eb
    }

    .tc:hover {
        background: #fdfdfd;
        border-color: rgba(245, 158, 11, .25);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .06)
    }

    .tg {
        background: rgba(255, 255, 255, .85);
        border: 1px solid #e5e7eb;
        backdrop-filter: blur(16px)
    }

    .ts {
        background: linear-gradient(180deg, #fff, #f9fafb, #fff);
        border-right: 1px solid #e5e7eb
    }

    .tt {
        color: #1e293b
    }

    .tm {
        color: #64748b
    }

    .td {
        color: #94a3b8
    }

    .tb {
        border-color: #e5e7eb
    }

    .ti {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        color: #1e293b
    }

    .th:hover {
        background: #f1f5f9
    }

    .tx {
        background: #f8fafc
    }

    .tx:hover {
        background: #f1f5f9
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #f59e0b, #8b5cf6);
        border-radius: 10px
    }

    .cd {
        border-radius: 1rem;
        transition: all .3s
    }

    .cd:hover {
        transform: translateY(-2px)
    }

    .gg {
        box-shadow: 0 0 30px rgba(245, 158, 11, .08)
    }

    .gp {
        box-shadow: 0 0 30px rgba(139, 92, 246, .08)
    }

    .ge {
        box-shadow: 0 0 30px rgba(16, 185, 129, .08)
    }

    .gr {
        box-shadow: 0 0 30px rgba(239, 68, 68, .08)
    }

    .tgg {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .sl {
        position: relative;
        transition: all .3s
    }

    .sl::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #f59e0b, #8b5cf6);
        border-radius: 0 4px 4px 0;
        transform: scaleY(0);
        transition: .3s
    }

    .sl:hover::before,
    .sl.ac::before {
        transform: scaleY(1)
    }

    .dark .sl:hover,
    .dark .sl.ac {
        background: linear-gradient(90deg, rgba(245, 158, 11, .1), transparent)
    }

    .sl:hover,
    .sl.ac {
        background: linear-gradient(90deg, rgba(245, 158, 11, .08), transparent)
    }

    .ld {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef4444;
        animation: p 1.5s infinite;
        display: inline-block
    }

    @keyframes p {
        0% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, .7)
        }

        70% {
            box-shadow: 0 0 0 8px rgba(239, 68, 68, 0)
        }

        100% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0)
        }
    }

    .pb {
        animation: fw 2s ease forwards
    }

    @keyframes fw {
        from {
            width: 0
        }
    }

    @keyframes fu {
        from {
            opacity: 0;
            transform: translateY(20px)
        }

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

    .fu {
        animation: fu .6s ease forwards
    }

    @keyframes sr {
        from {
            opacity: 0;
            transform: translateX(30px)
        }

        to {
            opacity: 1;
            transform: translateX(0)
        }
    }

    .sr {
        animation: sr .4s ease forwards
    }

    .ov {
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(4px)
    }

    .mb {
        background: rgba(0, 0, 0, .7);
        backdrop-filter: blur(8px)
    }

    .bt {
        position: relative;
        overflow: hidden
    }

    .bt::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle, rgba(255, 255, 255, .2) 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10);
        opacity: 0;
        transition: transform .5s, opacity 1s;
        pointer-events: none
    }

    .bt:active::after {
        transform: scale(0);
        opacity: .3;
        transition: 0s
    }

    @media(max-width:640px) {
        .mdd {
            position: fixed !important;
            top: 56px !important;
            left: 0 !important;
            right: 0 !important;
            margin: 8px !important;
            width: calc(100vw - 16px) !important;
            max-width: none !important
        }
    }

    .ta {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        color: #000 !important
    }

    .mc {
        position: relative;
        overflow: hidden
    }

    .mc::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle at top right, var(--gc, rgba(245, 158, 11, .1)), transparent 70%);
        pointer-events: none
    }

    .hc {
        aspect-ratio: 1;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        transition: transform .2s
    }

    .hc:hover {
        transform: scale(1.15);
        z-index: 1;
        position: relative
    }

    .h0 {
        background: rgba(107, 114, 128, .15);
        color: #6b7280
    }

    .h1 {
        background: rgba(16, 185, 129, .2);
        color: #10b981
    }

    .h2 {
        background: rgba(16, 185, 129, .4);
        color: #fff
    }

    .h3 {
        background: rgba(245, 158, 11, .5);
        color: #fff
    }

    .h4 {
        background: rgba(245, 158, 11, .7);
        color: #fff
    }

    .h5 {
        background: rgba(239, 68, 68, .8);
        color: #fff
    }

    .tu {
        color: #10b981
    }

    .tdn {
        color: #ef4444
    }

    .r1 {
        background: linear-gradient(135deg, #fbbf24, #d97706);
        color: #fff
    }

    .r2 {
        background: linear-gradient(135deg, #9ca3af, #4b5563);
        color: #fff
    }

    .r3 {
        background: linear-gradient(135deg, #d97706, #92400e);
        color: #fff
    }

    .ro {
        background: rgba(107, 114, 128, .15);
        color: #9ca3af
    }

    .kr {
        position: relative;
        width: 80px;
        height: 80px
    }

    .kr svg {
        transform: rotate(-90deg)
    }

    .kr .cl {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }