/* default login css */

:root{
    --ld-radius-lg: 20px;
    --ld-radius-md: 12px;
    --ld-font-display: "Aptos Display", "Trebuchet MS", "Segoe UI Variable Display", sans-serif;
    --ld-font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    --ld-ink-soft: rgba(228, 238, 251, .82);
    --ld-glass-deep: rgba(9, 17, 32, .72);
    --ld-glass-border: rgba(255,255,255,.08);
    --ld-cyan: #51dcff;
    --ld-violet: #8d73ff;
    --ld-gold: #ffb45e;
}

html,
body{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

html{
    background: #081221 !important;
    overflow-y: auto !important;
}

body{
    min-height: 100vh;
    background: #081221 !important;
    overflow: visible !important;
    font-family: var(--ld-font-body);
}

/*intro css */
#login_logo {
    height: 70px;
}
#intro_top {
  width: 100%;
  min-height: 460px;
  height: auto !important;
  z-index: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(29, 161, 242, 0.14), rgba(29, 161, 242, 0) 34%),
    radial-gradient(circle at 82% 10%, rgba(82, 44, 255, 0.14), rgba(82, 44, 255, 0) 30%),
    linear-gradient(180deg, #081221 0%, #0b1424 52%, #101a2d 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  animation: none;
  max-width: none;
  margin: 0;
  display: block;
  isolation: isolate;
}
#intro_top::before,
#intro_top::after{
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    filter: blur(54px);
    opacity: .72;
}
#intro_top::before{
    width: 38vw;
    height: 38vw;
    min-width: 320px;
    min-height: 320px;
    left: -10vw;
    top: 4%;
    background: radial-gradient(circle, rgba(53, 205, 255, .2) 0%, rgba(53, 205, 255, 0) 68%);
    animation: introAuroraDrift 15s ease-in-out infinite alternate;
}
#intro_top::after{
    width: 34vw;
    height: 34vw;
    min-width: 260px;
    min-height: 260px;
    right: -8vw;
    top: 8%;
    background: radial-gradient(circle, rgba(141, 115, 255, .18) 0%, rgba(141, 115, 255, 0) 68%);
    animation: introAuroraDriftAlt 17s ease-in-out infinite alternate;
}
#intro_top .bcell_mid{
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 18px 28px;
}
#intro_chat_float_layer{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.intro-motion-stage{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.intro-motion-grid{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,.92), transparent 82%);
    opacity: .16;
    animation: introGridShift 22s linear infinite;
}
.intro-motion-ribbon{
    position: absolute;
    border-radius: 999px;
    filter: blur(18px);
    opacity: .62;
    mix-blend-mode: screen;
}
.intro-motion-ribbon_one{
    width: min(54vw, 720px);
    height: min(18vw, 240px);
    left: -8%;
    top: 12%;
    background: linear-gradient(90deg, rgba(81, 220, 255, .08), rgba(81, 220, 255, .34), rgba(255,255,255,0));
    transform: rotate(-8deg);
    animation: introRibbonFloatOne 18s ease-in-out infinite alternate;
}
.intro-motion-ribbon_two{
    width: min(58vw, 760px);
    height: min(16vw, 220px);
    right: -12%;
    top: 4%;
    background: linear-gradient(90deg, rgba(141, 115, 255, 0), rgba(141, 115, 255, .28), rgba(141, 115, 255, .08));
    transform: rotate(12deg);
    animation: introRibbonFloatTwo 20s ease-in-out infinite alternate;
}
.intro-motion-ribbon_three{
    width: min(64vw, 820px);
    height: min(14vw, 180px);
    left: 18%;
    bottom: 16%;
    background: linear-gradient(90deg, rgba(255, 180, 94, .02), rgba(255, 180, 94, .18), rgba(255,255,255,0));
    transform: rotate(-4deg);
    animation: introRibbonFloatThree 16s ease-in-out infinite alternate;
}
.intro-motion-beam{
    position: absolute;
    top: -8%;
    width: 22%;
    min-width: 140px;
    height: 72%;
    opacity: .28;
    filter: blur(10px);
    transform: skewX(-16deg);
}
.intro-motion-beam_left{
    left: 2%;
    background: linear-gradient(180deg, rgba(81, 220, 255, .18), rgba(81, 220, 255, 0));
    animation: introBeamPulse 9s ease-in-out infinite alternate;
}
.intro-motion-beam_right{
    right: 4%;
    background: linear-gradient(180deg, rgba(141, 115, 255, .16), rgba(141, 115, 255, 0));
    animation: introBeamPulse 11s ease-in-out infinite alternate-reverse;
}
.intro-motion-skyline{
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    height: 30%;
    background:
        linear-gradient(180deg, rgba(12, 22, 40, 0), rgba(6, 12, 24, .84) 56%, rgba(4, 9, 18, .96) 100%);
    clip-path: polygon(0 82%, 4% 70%, 7% 76%, 11% 60%, 15% 74%, 18% 58%, 23% 68%, 28% 46%, 32% 72%, 36% 54%, 41% 66%, 46% 40%, 50% 64%, 54% 48%, 58% 74%, 62% 56%, 67% 70%, 72% 44%, 76% 62%, 81% 50%, 86% 74%, 91% 58%, 95% 70%, 100% 62%, 100% 100%, 0 100%);
    opacity: .9;
}
.intro-motion-skyline::before,
.intro-motion-skyline::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.intro-motion-skyline::before{
    background:
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.04) 34px 36px, transparent 36px 76px),
        repeating-linear-gradient(180deg, transparent 0 16px, rgba(81, 220, 255, .08) 16px 18px, transparent 18px 34px);
    mix-blend-mode: screen;
    opacity: .42;
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.82) 28%, rgba(0,0,0,1) 100%);
    animation: introWindowPulse 7.4s ease-in-out infinite alternate;
}
.intro-motion-skyline::after{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    opacity: .24;
}
.intro-motion-orb{
    position: absolute;
    left: var(--orb-x);
    top: var(--orb-y);
    width: var(--orb-size);
    height: var(--orb-size);
    border-radius: 50%;
    opacity: .34;
    filter: blur(12px);
    transform: translate3d(0, 0, 0) scale(.96);
    animation: introOrbFloat var(--orb-dur) ease-in-out infinite alternate;
    animation-delay: var(--orb-delay);
}
.intro-motion-orb_cyan{
    background: radial-gradient(circle, rgba(81, 220, 255, .32) 0%, rgba(81, 220, 255, .12) 38%, rgba(81, 220, 255, 0) 72%);
}
.intro-motion-orb_violet{
    background: radial-gradient(circle, rgba(141, 115, 255, .28) 0%, rgba(141, 115, 255, .11) 38%, rgba(141, 115, 255, 0) 72%);
}
.intro-motion-orb_gold{
    background: radial-gradient(circle, rgba(255, 180, 94, .24) 0%, rgba(255, 180, 94, .08) 38%, rgba(255, 180, 94, 0) 72%);
}
.intro-motion-spark{
    position: absolute;
    left: var(--spark-x);
    top: var(--spark-y);
    width: var(--spark-size);
    height: var(--spark-size);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(143, 228, 255, .62) 46%, rgba(255,255,255,0) 76%);
    box-shadow: 0 0 12px rgba(81, 220, 255, .18);
    opacity: 0;
    animation: introSparkFloat var(--spark-dur) linear infinite;
    animation-delay: var(--spark-delay);
}
.intro-social-stage{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.intro-social-art{
    position: absolute;
    inset: -2% -4%;
    background:
        linear-gradient(180deg, rgba(8, 18, 33, .12), rgba(8, 18, 33, .48)),
        url("images/chat-hologram.jpg") center center / cover no-repeat;
    filter: saturate(1.08) contrast(1.04) brightness(.94);
    opacity: .58;
    transform: scale(1.03);
    animation: introSocialArtPan 24s ease-in-out infinite alternate;
}
.intro-social-art::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(81, 220, 255, .18), rgba(81, 220, 255, 0) 28%),
        radial-gradient(circle at 82% 20%, rgba(141, 115, 255, .16), rgba(141, 115, 255, 0) 26%),
        linear-gradient(180deg, rgba(5, 11, 22, .14), rgba(5, 11, 22, .38));
    mix-blend-mode: screen;
    opacity: .8;
}
.intro-social-gradient{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(81, 220, 255, .12), rgba(81, 220, 255, 0) 28%),
        radial-gradient(circle at 78% 14%, rgba(141, 115, 255, .12), rgba(141, 115, 255, 0) 26%),
        radial-gradient(circle at 52% 76%, rgba(255, 180, 94, .06), rgba(255, 180, 94, 0) 22%);
    opacity: .86;
}
.intro-social-flow{
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    opacity: .34;
    filter: blur(.2px);
}
.intro-social-flow_one{
    width: min(68vw, 860px);
    height: min(34vw, 400px);
    left: -8%;
    top: 10%;
    border-color: rgba(81, 220, 255, .12);
    animation: introSocialFlowOne 18s ease-in-out infinite alternate;
}
.intro-social-flow_two{
    width: min(54vw, 680px);
    height: min(28vw, 320px);
    right: -6%;
    top: 20%;
    border-color: rgba(141, 115, 255, .12);
    animation: introSocialFlowTwo 20s ease-in-out infinite alternate;
}
.intro-social-flow_three{
    width: min(58vw, 760px);
    height: min(26vw, 280px);
    left: 24%;
    bottom: 12%;
    border-color: rgba(255, 180, 94, .1);
    animation: introSocialFlowThree 16s ease-in-out infinite alternate;
}
.intro-social-network{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28%;
    opacity: .28;
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.88) 16%, rgba(0,0,0,.88) 84%, transparent 100%);
}
.intro-social-network_left{
    left: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 44% 42%, rgba(81, 220, 255, .85) 0 3px, transparent 4px),
        radial-gradient(circle at 66% 16%, rgba(255,255,255,.84) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 62%, rgba(255,255,255,.88) 0 2px, transparent 3px),
        linear-gradient(128deg, transparent 0 18%, rgba(81, 220, 255, .12) 18% 19%, transparent 19% 100%),
        linear-gradient(98deg, transparent 0 40%, rgba(255,255,255,.08) 40% 41%, transparent 41% 100%),
        linear-gradient(58deg, transparent 0 58%, rgba(81, 220, 255, .12) 58% 59%, transparent 59% 100%);
}
.intro-social-network_right{
    right: 0;
    background:
        radial-gradient(circle at 78% 24%, rgba(255,255,255,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 56% 38%, rgba(141, 115, 255, .85) 0 3px, transparent 4px),
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.84) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 62%, rgba(255,255,255,.88) 0 2px, transparent 3px),
        linear-gradient(-128deg, transparent 0 18%, rgba(141, 115, 255, .12) 18% 19%, transparent 19% 100%),
        linear-gradient(-98deg, transparent 0 40%, rgba(255,255,255,.08) 40% 41%, transparent 41% 100%),
        linear-gradient(-58deg, transparent 0 58%, rgba(141, 115, 255, .12) 58% 59%, transparent 59% 100%);
}
.intro-social-card{
    position: absolute;
    left: var(--card-x);
    top: var(--card-y);
    width: var(--card-width);
    height: var(--card-height);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 13px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.018) 42%, rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(8, 18, 40, .56), rgba(15, 31, 62, .24));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 30px rgba(0,0,0,.1);
    backdrop-filter: blur(10px) saturate(136%);
    -webkit-backdrop-filter: blur(10px) saturate(136%);
    opacity: .26;
    animation: introSocialCardFloat var(--card-dur) ease-in-out infinite alternate;
    animation-delay: var(--card-delay);
    overflow: hidden;
    --feed-accent: rgba(81, 220, 255, .96);
    --feed-accent-soft: rgba(81, 220, 255, .18);
    --feed-highlight: rgba(81, 220, 255, .24);
}
.intro-social-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%);
    opacity: .54;
    pointer-events: none;
}
.intro-social-card::after{
    content: "";
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--feed-highlight) 0%, rgba(255,255,255,0) 70%);
    opacity: .78;
    pointer-events: none;
}
.intro-social-card_head{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.intro-social-card_roomdot{
    width: 11px;
    min-width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--feed-accent);
    box-shadow:
        0 0 14px var(--feed-accent),
        0 0 0 4px var(--feed-accent-soft);
}
.intro-social-card_identity{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.intro-social-card_name{
    display: block;
    color: #f6f9ff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.intro-social-card_handle{
    color: rgba(220, 232, 251, .68);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.intro-social-card_caption{
    color: rgba(229, 239, 251, .52);
    font-size: 8px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.intro-social-card_chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(7, 12, 24, .42);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(235, 244, 255, .88);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 18px rgba(0,0,0,.12);
}
.intro-social-card_chip i{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    flex: none;
}
.intro-social-card_thread{
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 70px;
    padding: 10px 10px 11px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(135deg, rgba(10, 22, 44, .84), rgba(17, 24, 56, .58) 56%, rgba(17, 24, 56, .18)),
        radial-gradient(circle at 86% 14%, var(--feed-accent-soft), rgba(255,255,255,0) 42%);
}
.intro-social-card_thread::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 36%),
        linear-gradient(140deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.intro-social-card_thread::after{
    position: absolute;
    left: -18px;
    bottom: -20px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 72%);
    opacity: .42;
}
.intro-social-card_message{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.intro-social-card_message_second{
    opacity: .88;
}
.intro-social-card_message_avatar{
    position: relative;
    z-index: 2;
    width: 23px;
    min-width: 23px;
    height: 23px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 6px 12px rgba(0,0,0,.16);
}
.intro-social-card_message_avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.intro-social-card_message_copy{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.intro-social-card_message_name{
    color: rgba(244, 248, 255, .9);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.intro-social-card_message_text{
    position: relative;
    z-index: 2;
    color: rgba(228, 239, 252, .64);
    font-size: 8px;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.intro-social-card_typing{
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 2px;
}
.intro-social-card_typing_dots{
    display: inline-flex;
    gap: 4px;
}
.intro-social-card_typing_dots i{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(241, 247, 255, .82);
    animation: introTypingPulse 1s ease-in-out infinite;
}
.intro-social-card_typing_dots i:nth-child(2){ animation-delay: .16s; }
.intro-social-card_typing_dots i:nth-child(3){ animation-delay: .32s; }
.intro-social-card_typing_text{
    color: rgba(233, 242, 255, .58);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.intro-social-card_stats{
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.intro-social-card_stat{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.038);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(234, 243, 255, .72);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.intro-social-card_stat::before{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
    flex: none;
}
.intro-social-card_stat_primary::before{
    background: var(--feed-accent);
    box-shadow: 0 0 10px var(--feed-accent);
}
.intro-social-card_stat_secondary::before{
    background: rgba(255,255,255,.78);
}
.intro-social-card_stat_tertiary::before{
    background: rgba(255, 184, 94, .94);
}
.intro-social-card_cyan{
    --feed-accent: rgba(81, 220, 255, .96);
    --feed-accent-soft: rgba(81, 220, 255, .18);
    --feed-highlight: rgba(81, 220, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(81, 220, 255, .1);
}
.intro-social-card_violet{
    --feed-accent: rgba(166, 131, 255, .96);
    --feed-accent-soft: rgba(166, 131, 255, .16);
    --feed-highlight: rgba(166, 131, 255, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(166, 131, 255, .1);
}
.intro-social-card_gold{
    --feed-accent: rgba(255, 194, 98, .96);
    --feed-accent-soft: rgba(255, 194, 98, .18);
    --feed-highlight: rgba(255, 194, 98, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(255, 194, 98, .1);
}
.intro-social-card_ice{
    --feed-accent: rgba(214, 238, 255, .96);
    --feed-accent-soft: rgba(214, 238, 255, .16);
    --feed-highlight: rgba(214, 238, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(214, 238, 255, .1);
}
.intro-social-card_chip_group{
    color: #7fe6ff;
}
.intro-social-card_chip_voice{
    color: #b996ff;
}
.intro-social-card_chip_quiet{
    color: #ffd28d;
}
.intro-social-card_type_group .intro-social-card_thread{
    background:
        linear-gradient(135deg, rgba(10, 36, 58, .92), rgba(21, 24, 62, .72) 52%, rgba(91, 230, 255, .2)),
        radial-gradient(circle at 82% 14%, rgba(91, 230, 255, .14), rgba(255,255,255,0) 36%);
}
.intro-social-card_type_voice .intro-social-card_thread{
    background:
        linear-gradient(135deg, rgba(16, 28, 66, .92), rgba(22, 22, 58, .74) 52%, rgba(166, 131, 255, .24)),
        radial-gradient(circle at 82% 14%, rgba(166, 131, 255, .14), rgba(255,255,255,0) 36%);
}
.intro-social-card_type_quiet .intro-social-card_thread{
    background:
        linear-gradient(135deg, rgba(21, 27, 56, .92), rgba(18, 20, 42, .74) 52%, rgba(255, 194, 98, .22)),
        radial-gradient(circle at 82% 14%, rgba(255, 194, 98, .14), rgba(255,255,255,0) 36%);
}
.intro-social-ping{
    position: absolute;
    left: var(--ping-x);
    top: var(--ping-y);
    width: var(--ping-size);
    height: var(--ping-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .74;
}
.intro-social-ping::before,
.intro-social-ping i{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.intro-social-ping::before{
    background: rgba(255,255,255,.9);
    box-shadow: 0 0 12px rgba(255,255,255,.2);
}
.intro-social-ping i{
    border: 1px solid rgba(255,255,255,.18);
    animation: introSocialPingPulse var(--ping-dur) ease-out infinite;
    animation-delay: var(--ping-delay);
}
.intro-social-ping_cyan::before{ background: rgba(81, 220, 255, .92); box-shadow: 0 0 14px rgba(81, 220, 255, .28); }
.intro-social-ping_violet::before{ background: rgba(141, 115, 255, .9); box-shadow: 0 0 14px rgba(141, 115, 255, .24); }
.intro-social-ping_gold::before{ background: rgba(255, 180, 94, .9); box-shadow: 0 0 14px rgba(255, 180, 94, .24); }
.intro-social-ping_ice::before{ background: rgba(214, 238, 255, .92); box-shadow: 0 0 14px rgba(214, 238, 255, .22); }
.intro-float-bubble{
    position: absolute;
    left: var(--bubble-x);
    bottom: -96px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px 7px 7px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(8, 18, 40, .74), rgba(15, 31, 62, .58));
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(6px) saturate(118%);
    opacity: 0;
    transform: translate3d(var(--bubble-drift), 0, 0) scale(.94);
    animation: introBubbleRise var(--bubble-dur) linear infinite;
    animation-delay: var(--bubble-delay);
    z-index: 2;
}
.intro-float-avatar{
    width: var(--bubble-size);
    height: var(--bubble-size);
    min-width: var(--bubble-size);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.28);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.intro-float-avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.intro-float-content{
    display: flex;
    flex-direction: column;
    min-width: 74px;
}
.intro-float-name{
    color: #f5f8ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 108px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.intro-float-typing{
    display: inline-flex;
    gap: 4px;
    margin-top: 4px;
}
.intro-float-typing i{
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    background: rgba(219, 232, 255, .92);
    animation: introTypingPulse 1s ease-in-out infinite;
}
.intro-float-typing i:nth-child(2){ animation-delay: .18s; }
.intro-float-typing i:nth-child(3){ animation-delay: .36s; }
.intro-reaction-bubble{
    position: absolute;
    left: var(--reaction-x);
    bottom: -96px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--reaction-size);
    height: var(--reaction-size);
    opacity: 0;
    transform: translate3d(var(--reaction-drift), 0, 0) scale(.9);
    animation: introReactionRise var(--reaction-dur) linear infinite;
    animation-delay: var(--reaction-delay);
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .22));
    z-index: 2;
}
.intro-reaction-icon{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22));
}
.intro-rank-owner{
    border-color: rgba(255, 208, 84, .78);
    box-shadow: 0 0 0 1px rgba(255, 208, 84, .24), 0 10px 26px rgba(255, 193, 51, .26);
}
.intro-rank-owner .intro-float-avatar{
    border-color: rgba(255, 219, 117, .92);
    box-shadow: 0 0 18px rgba(255, 208, 84, .34);
}
.intro-rank-owner .intro-float-name{
    color: #ffd46b;
}
.intro-rank-super-admin{
    border-color: rgba(255, 154, 60, .78);
    box-shadow: 0 0 0 1px rgba(255, 154, 60, .22), 0 10px 24px rgba(255, 132, 31, .24);
}
.intro-rank-super-admin .intro-float-avatar{
    border-color: rgba(255, 168, 84, .92);
}
.intro-rank-super-admin .intro-float-name{
    color: #ff9a3c;
}
.intro-rank-admin{
    border-color: rgba(255, 226, 91, .78);
    box-shadow: 0 0 0 1px rgba(255, 226, 91, .20), 0 10px 22px rgba(255, 226, 91, .22);
}
.intro-rank-admin .intro-float-avatar{
    border-color: rgba(255, 235, 140, .92);
}
.intro-rank-admin .intro-float-name{
    color: #ffe25b;
}
.intro-rank-moderator{
    border-color: rgba(214, 219, 228, .72);
    box-shadow: 0 0 0 1px rgba(214, 219, 228, .18), 0 10px 22px rgba(197, 203, 214, .20);
}
.intro-rank-moderator .intro-float-avatar{
    border-color: rgba(229, 234, 241, .92);
}
.intro-rank-moderator .intro-float-name{
    color: #dfe4ed;
}
.intro-rank-vip{
    border-color: rgba(173, 109, 255, .76);
    box-shadow: 0 0 0 1px rgba(173, 109, 255, .18), 0 10px 22px rgba(146, 82, 255, .24);
}
.intro-rank-vip .intro-float-avatar{
    border-color: rgba(188, 141, 255, .92);
}
.intro-rank-vip .intro-float-name{
    color: #b785ff;
}
.intro_top_level_wrap{
    width: min(100%, 980px);
    margin: 34px auto 22px;
    padding: 0;
    position: relative;
}
.intro_top_level_header{
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
}
.intro_top_level_header_copy{
    max-width: 700px;
    text-align: left;
}
.intro_top_level_eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(129, 223, 255, .86);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.intro_top_level_eyebrow::before{
    content: "";
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(81, 220, 255, .95), rgba(81, 220, 255, .18));
}
.intro_top_level_heading{
    margin: 10px 0 0;
    color: #f3f7ff;
    font-family: var(--ld-font-display);
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-align: left;
    text-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.intro_top_level_subtitle{
    margin: 10px 0 0;
    color: rgba(226, 236, 248, .66);
    font-size: 13px;
    line-height: 1.55;
}
.intro_top_level_grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    align-items: stretch;
}
.intro_top_level_card{
    --leader-accent: rgba(129, 190, 255, .86);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 184px;
    width: 100%;
    padding: 18px 18px 16px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        linear-gradient(155deg, rgba(10, 20, 38, .92), rgba(15, 29, 52, .76));
    box-shadow:
        0 14px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.03);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.intro_top_level_card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.11);
    box-shadow:
        0 18px 34px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.04);
}
.intro_top_level_card::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    opacity: .95;
}
.intro_top_level_card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%, rgba(255,255,255,.024) 100%);
    pointer-events: none;
}
.intro_top_level_card_head{
    position: relative;
    z-index: 1;
}
.intro_top_level_metric_tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.intro_top_level_metric_icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
    color: var(--leader-accent);
    background: color-mix(in srgb, var(--leader-accent) 12%, rgba(255,255,255,.03));
    border: 1px solid color-mix(in srgb, var(--leader-accent) 20%, rgba(255,255,255,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.intro_top_level_metric_icon i{
    font-size: 14px;
}
.intro_top_level_metric_label{
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.055);
    color: rgba(228, 236, 248, .82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.intro_top_level_member{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.intro_top_level_avatar{
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        0 0 0 4px rgba(255,255,255,.02);
    background: rgba(13, 22, 39, .86);
    position: relative;
}
.intro_top_level_avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.intro_top_level_member_meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.intro_top_level_name{
    display: block;
    min-width: 0;
    color: #eef4ff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.intro_top_level_member_hint{
    color: rgba(224, 234, 248, .52);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.intro_top_level_value_row{
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.intro_top_level_value_group{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.intro_top_level_value{
    color: #f4f7fd;
    font-family: var(--ld-font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.03em;
}
.intro_top_level_value_suffix{
    color: color-mix(in srgb, var(--leader-accent) 76%, #dfe8f7);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.intro_metric_level{
    --leader-accent: #8ebeff;
}
.intro_metric_level::before{
    background: linear-gradient(90deg, rgba(126, 171, 255, .98), rgba(126, 171, 255, 0) 82%);
}
.intro_metric_gold{
    --leader-accent: #ffcf62;
}
.intro_metric_gold::before{
    background: linear-gradient(90deg, rgba(255, 199, 95, .98), rgba(255, 199, 95, 0) 82%);
}
.intro_metric_likes{
    --leader-accent: #ff74a9;
}
.intro_metric_likes::before{
    background: linear-gradient(90deg, rgba(255, 116, 169, .98), rgba(255, 116, 169, 0) 82%);
}
.intro_metric_quiz{
    --leader-accent: #7fd7ff;
}
.intro_metric_quiz::before{
    background: linear-gradient(90deg, rgba(127, 215, 255, .98), rgba(127, 215, 255, 0) 82%);
}
.intro_metric_ruby{
    --leader-accent: #c086ff;
}
.intro_metric_ruby::before{
    background: linear-gradient(90deg, rgba(192, 134, 255, .98), rgba(192, 134, 255, 0) 82%);
}
.intro_metric_xp{
    --leader-accent: #82f0a0;
}
.intro_metric_xp::before{
    background: linear-gradient(90deg, rgba(130, 240, 160, .98), rgba(130, 240, 160, 0) 82%);
}
@media (max-width: 900px){
    .intro_top_level_wrap{
        width: min(100%, 780px);
        margin: 24px auto;
    }
    .intro_top_level_grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .intro_top_level_card{
        padding: 16px;
    }
}

@media (max-width: 560px){
    .intro_top_level_wrap{
        width: min(100%, 360px);
        margin-top: 22px;
    }
    .intro_top_level_heading{
        font-size: 28px;
    }
    .intro_top_level_subtitle{
        font-size: 12px;
        line-height: 1.55;
    }
    .intro_top_level_grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .intro_top_level_card{
        padding: 15px;
    }
    .intro_top_level_card_head{
        gap: 8px;
    }
    .intro_top_level_metric_tag{
        gap: 8px;
    }
    .intro_top_level_metric_label{
        max-width: calc(100% - 44px);
        font-size: 9px;
        padding: 6px 9px;
    }
    .intro_top_level_avatar{
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 15px;
    }
    .intro_top_level_name{
        font-size: 15px;
    }
    .intro_top_level_member_hint{
        font-size: 10px;
    }
    .intro_top_level_value{
        font-size: 28px;
    }
    .intro_top_level_value_suffix{
        font-size: 10px;
    }
}
@keyframes introSocialFlowOne {
  0% { transform: rotate(-10deg) translate3d(0, 0, 0) scale(1); opacity: .18; }
  100% { transform: rotate(-5deg) translate3d(42px, -18px, 0) scale(1.04); opacity: .34; }
}

@keyframes introSocialFlowTwo {
  0% { transform: rotate(8deg) translate3d(0, 0, 0) scale(1); opacity: .16; }
  100% { transform: rotate(13deg) translate3d(-46px, 20px, 0) scale(1.05); opacity: .3; }
}

@keyframes introSocialFlowThree {
  0% { transform: rotate(-2deg) translate3d(0, 0, 0) scale(1); opacity: .14; }
  100% { transform: rotate(3deg) translate3d(20px, -14px, 0) scale(1.03); opacity: .28; }
}

@keyframes introSocialArtPan {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.08) translate3d(-1.4%, 1.2%, 0);
  }
}

@keyframes introSocialCardFloat {
  0% {
    opacity: .14;
    transform: translate3d(0, 0, 0) scale(.98);
  }
  100% {
    opacity: .32;
    transform: translate3d(var(--card-dx), var(--card-dy), 0) scale(1.02);
  }
}

@keyframes introSocialPingPulse {
  0% {
    opacity: .72;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.8);
  }
}

@keyframes introBubbleRise {
  0% {
    opacity: 0;
    transform: translate3d(var(--bubble-drift), 0, 0) scale(.94);
  }
  10% {
    opacity: .8;
  }
  85% {
    opacity: .72;
    transform: translate3d(calc(var(--bubble-drift) * .22), -78vh, 0) scale(.99);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -98vh, 0) scale(1.01);
  }
}
@keyframes introReactionRise {
  0% {
    opacity: 0;
    transform: translate3d(var(--reaction-drift), 0, 0) scale(.84);
  }
  12% {
    opacity: .96;
  }
  82% {
    opacity: .82;
    transform: translate3d(calc(var(--reaction-drift) * .22), -72vh, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -94vh, 0) scale(1.02);
  }
}
@keyframes introTypingPulse {
  0%, 80%, 100% { transform: translateY(0); opacity: .55; }
  40% { transform: translateY(-2px); opacity: 1; }
}

/* Centered element styling for buttons */
.centered_element2 {
    display: flex;
    gap: 10px; /* Space between buttons, adjust as needed */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Align buttons vertically within container */
    flex-wrap: wrap; /* Prevent overflow in smaller screens */
}

@keyframes moveRightToLeft {
  from {
    background-position: calc(100% + 1920px) center; /* Adjust 1920px based on the maximum width */
  }
  to {
    background-position: -1920px center; /* Adjust 1920px based on the maximum width */
  }
}
#login_wrap {
    width: 100%;
    min-height: 100vh;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
#login_all {
    width: 800px;
    max-width: 94%;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
    color: #fff;
}
.login_text{
    max-width: 860px;
    margin: 0 auto;
    padding: 22px 34px 28px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
        radial-gradient(circle at top, rgba(81, 220, 255, .09), rgba(81, 220, 255, 0) 48%),
        radial-gradient(circle at bottom right, rgba(255, 180, 94, .06), rgba(255, 180, 94, 0) 36%),
        rgba(7, 16, 31, .28);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 24px 58px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.login_text::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    width: 86px;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(81, 220, 255, 0), rgba(81, 220, 255, .92), rgba(255, 184, 47, .72), rgba(81, 220, 255, 0));
    box-shadow: 0 0 18px rgba(81, 220, 255, .18);
}
.login_text::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.05), rgba(255,255,255,0) 34%);
    pointer-events: none;
    opacity: .65;
}
.login_text .text_xlarge{
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -.034em;
    line-height: .98;
    text-wrap: balance;
    font-family: var(--ld-font-display);
    text-shadow: 0 8px 28px rgba(0,0,0,.34);
    max-width: 12ch;
    margin: 8px auto 14px;
}
.login_text .text_med{
    font-size: clamp(16px, 2vw, 22px);
    color: var(--ld-ink-soft);
    line-height: 1.62;
    max-width: 42ch;
    margin: 0 auto;
    text-wrap: balance;
}
.login_not_member { text-align:center; padding-top:5px; }
.centered_element.vpad15{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.centered_element:has(.intro_guest_btn){
    margin-top: 8px;
}
.intro_login_btn,
.intro_guest_btn{
    --hero-btn-accent: #72d407;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    color: #f7fbff !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow:
        0 16px 36px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(0,0,0,.24);
    transition: transform .18s ease, filter .18s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    white-space: nowrap;
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.12), rgba(255,255,255,0) 38%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
        linear-gradient(180deg, rgba(17, 29, 51, .98), rgba(9, 18, 35, .98)) !important;
}
.intro_login_btn::before,
.intro_guest_btn::before{
    content: "";
    position: absolute;
    top: -20%;
    left: -36%;
    width: 34%;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: translateX(0) skewX(-24deg);
    opacity: 0;
    transition: transform .55s ease, opacity .2s ease;
    pointer-events: none;
}
.intro_login_btn::after,
.intro_guest_btn::after{
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--hero-btn-accent), transparent);
    opacity: .8;
    transition: opacity .2s ease, left .2s ease, right .2s ease;
    pointer-events: none;
}
.intro_login_btn.large_button_rounded,
.intro_guest_btn.small_button_rounded{
    min-height: 56px;
    border-radius: 19px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.016em;
}
.intro_login_btn.large_button_rounded{
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
.intro_guest_btn.small_button_rounded{
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
.intro_login_btn.ok_btn{
    --hero-btn-accent: #88db16;
    border-color: rgba(192, 244, 94, .2) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.34),
        0 0 22px rgba(136, 219, 22, .1),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(0,0,0,.24);
}
.intro_login_btn.theme_btn{
    --hero-btn-accent: #25cfff;
    border-color: rgba(113, 231, 255, .2) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.34),
        0 0 22px rgba(37, 207, 255, .1),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(0,0,0,.24);
}
.intro_guest_btn.warn_btn{
    --hero-btn-accent: #ffb82f;
    border-color: rgba(255, 215, 114, .2) !important;
    min-height: 50px;
    border-radius: 999px;
    padding: 0 22px;
    width: auto;
    min-width: 0;
    max-width: none;
    box-shadow:
        0 16px 32px rgba(0,0,0,.28),
        0 0 18px rgba(255, 184, 47, .08),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.2);
}
.intro_login_btn i,
.intro_guest_btn i{
    margin-right: 0;
    font-size: .92em;
    color: var(--hero-btn-accent);
    position: relative;
    z-index: 1;
}
.intro_login_btn:hover,
.intro_guest_btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.04);
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.24);
}
.intro_login_btn.ok_btn:hover,
.intro_login_btn.theme_btn:hover,
.intro_guest_btn.warn_btn:hover{
    box-shadow:
        0 20px 42px rgba(0,0,0,.38),
        0 0 26px color-mix(in srgb, var(--hero-btn-accent) 16%, transparent),
        0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.24);
}
.intro_login_btn:hover::before,
.intro_guest_btn:hover::before{
    transform: translateX(420%) skewX(-24deg);
    opacity: 1;
}
.intro_login_btn:hover::after,
.intro_guest_btn:hover::after{
    left: 8px;
    right: 8px;
    opacity: 1;
}
.intro_login_btn:active,
.intro_guest_btn:active{
    transform: translateY(0) scale(.99);
    filter: brightness(.985);
}
.intro_login_btn:focus-visible,
.intro_guest_btn:focus-visible{
    outline: 2px solid rgba(179, 236, 255, .95);
    outline-offset: 4px;
}

/* auth modal override */
body #small_modal #small_modal_in:has(#login_form_box),
body #small_modal #small_modal_in:has(#registration_form_box),
body #small_modal #small_modal_in:has(#guest_form_box),
body #small_modal #small_modal_in:has(#recovery_email){
    max-width: min(460px, calc(100vw - 28px)) !important;
    border-radius: 26px !important;
    padding: 30px 24px 24px !important;
    background:
        radial-gradient(circle at top, rgba(39, 201, 255, .08), transparent 38%),
        linear-gradient(180deg, rgba(17, 29, 51, .985), rgba(7, 15, 28, .985)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 26px 70px rgba(0,0,0,.44),
        0 8px 22px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body #small_modal #small_modal_in:has(#login_form_box) .modal_close,
body #small_modal #small_modal_in:has(#registration_form_box) .modal_close,
body #small_modal #small_modal_in:has(#guest_form_box) .modal_close,
body #small_modal #small_modal_in:has(#recovery_email) .modal_close{
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #eaf4ff !important;
    top: 14px !important;
    right: 14px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
body #small_modal #small_modal_in:has(#login_form_box) .modal_close:hover,
body #small_modal #small_modal_in:has(#registration_form_box) .modal_close:hover,
body #small_modal #small_modal_in:has(#guest_form_box) .modal_close:hover,
body #small_modal #small_modal_in:has(#recovery_email) .modal_close:hover{
    background: rgba(255,255,255,.1) !important;
}
#small_modal_content > #login_form_box,
#small_modal_content > #registration_form_box,
#small_modal_content > #guest_form_box,
#small_modal_content > .modal_title:has(+ .modal_content #recovery_email){
    color: #edf5ff !important;
}
#small_modal_content > #login_form_box .modal_title,
#small_modal_content > #registration_form_box .modal_title,
#small_modal_content > #guest_form_box .modal_title,
#small_modal_content > .modal_title:has(+ .modal_content #recovery_email){
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
    padding: 0 0 18px 0 !important;
    color: #f7fbff !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.24) !important;
}
#small_modal_content > #login_form_box .modal_content,
#small_modal_content > #registration_form_box .modal_content,
#small_modal_content > #guest_form_box .modal_content,
#small_modal_content > .modal_content:has(#recovery_email){
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
#small_modal_content > #login_form_box .bpad15,
#small_modal_content > #registration_form_box .bpad15,
#small_modal_content > #guest_form_box .bpad15,
#small_modal_content > #login_form_box .vpad15,
#small_modal_content > #registration_form_box .vpad15,
#small_modal_content > #guest_form_box .vpad15{
    padding: 0 !important;
}
#small_modal_content > #login_form_box .modal_control,
#small_modal_content > #registration_form_box .modal_control,
#small_modal_content > #guest_form_box .modal_control,
#small_modal_content > .modal_control:has(#recovery_button){
    padding-top: 20px !important;
    padding-bottom: 2px !important;
}
#small_modal_content > #login_form_box .full_input,
#small_modal_content > #registration_form_box .full_input,
#small_modal_content > #guest_form_box .full_input,
#small_modal_content > .modal_content #recovery_email,
#small_modal_content > #login_form_box select,
#small_modal_content > #registration_form_box select,
#small_modal_content > #guest_form_box select{
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        rgba(8, 16, 30, .92) !important;
    color: #f4f8ff !important;
    padding: 0 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 8px 20px rgba(0,0,0,.18) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-container,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-container,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-container{
    width: 100% !important;
    display: block !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-container .selectboxit,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-container .selectboxit,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-container .selectboxit,
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-btn,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-btn,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-btn{
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        rgba(8, 16, 30, .92) !important;
    color: #f4f8ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 8px 20px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-container span,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-container span,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-container span,
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-container .selectboxit-options a,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-container .selectboxit-options a,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-container .selectboxit-options a{
    height: 50px !important;
    line-height: 50px !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-text,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-text,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-text{
    max-width: calc(100% - 42px) !important;
    text-indent: 0 !important;
    padding: 0 16px !important;
    color: #f4f8ff !important;
    font-weight: 600 !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-arrow-container,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-arrow-container,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-arrow-container{
    width: 42px !important;
    right: 0 !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-default-arrow,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-default-arrow,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-default-arrow{
    border-top: 6px solid #9ee9ff !important;
    border-right: 5px solid transparent !important;
    border-left: 5px solid transparent !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-btn.selectboxit-enabled:hover,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-btn.selectboxit-enabled:hover,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-btn.selectboxit-enabled:hover,
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-btn.selectboxit-enabled:focus,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-btn.selectboxit-enabled:focus,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-btn.selectboxit-enabled:focus,
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-btn.selectboxit-enabled:active,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-btn.selectboxit-enabled:active,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-btn.selectboxit-enabled:active{
    border-color: rgba(68, 196, 255, .44) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(8, 16, 30, .96) !important;
    color: #f4f8ff !important;
    box-shadow:
        0 0 0 3px rgba(39, 201, 255, .12),
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-options,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-options,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-options{
    background: rgba(8, 16, 30, .98) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    padding: 6px !important;
    box-shadow:
        0 22px 48px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-list .selectboxit-option-anchor,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-list .selectboxit-option-anchor,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-list .selectboxit-option-anchor{
    color: #eaf4ff !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
}
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
#small_modal #small_modal_in:has(#login_form_box) .selectboxit-option .selectboxit-option-anchor:hover,
#small_modal #small_modal_in:has(#registration_form_box) .selectboxit-option .selectboxit-option-anchor:hover,
#small_modal #small_modal_in:has(#guest_form_box) .selectboxit-option .selectboxit-option-anchor:hover{
    background: rgba(39, 201, 255, .14) !important;
    color: #ffffff !important;
}
#small_modal_content > #login_form_box .full_input::placeholder,
#small_modal_content > #registration_form_box .full_input::placeholder,
#small_modal_content > #guest_form_box .full_input::placeholder,
#small_modal_content > .modal_content #recovery_email::placeholder{
    color: rgba(220, 233, 250, .62);
}
#small_modal_content > #login_form_box .full_input:focus,
#small_modal_content > #registration_form_box .full_input:focus,
#small_modal_content > #guest_form_box .full_input:focus,
#small_modal_content > .modal_content #recovery_email:focus,
#small_modal_content > #login_form_box select:focus,
#small_modal_content > #registration_form_box select:focus,
#small_modal_content > #guest_form_box select:focus{
    border-color: rgba(68, 196, 255, .44) !important;
    box-shadow:
        0 0 0 3px rgba(39, 201, 255, .12),
        0 12px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-1px);
}
#small_modal_content > #registration_form_box .register_date,
#small_modal_content > #guest_form_box .register_date{
    padding: 14px 16px 16px !important;
    border-radius: 18px !important;
    background: rgba(7, 15, 28, .56) !important;
    border: 1px solid rgba(255,255,255,.08);
}
#small_modal_content > #registration_form_box .register_date .label,
#small_modal_content > #guest_form_box .register_date .label{
    padding: 0 0 10px 0 !important;
    color: #d8e9ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
#small_modal_content > #registration_form_box .date_form,
#small_modal_content > #guest_form_box .date_form{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
#small_modal_content > #registration_form_box .date_col,
#small_modal_content > #guest_form_box .date_col{
    width: auto !important;
    float: none !important;
}
#small_modal_content > #registration_form_box .large_button,
#small_modal_content > #guest_form_box .large_button,
#small_modal_content > #login_form_box .large_button,
#small_modal_content > .modal_control #recovery_button{
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(100, 221, 255, .24) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 36%),
        linear-gradient(180deg, #1dcaf4 0%, #0fb1dc 58%, #078fbc 100%) !important;
    color: #f7fcff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -.012em !important;
    box-shadow:
        0 16px 34px rgba(6, 132, 176, .22),
        0 10px 24px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,79,108,.2);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#small_modal_content > #registration_form_box .large_button:hover,
#small_modal_content > #guest_form_box .large_button:hover,
#small_modal_content > #login_form_box .large_button:hover,
#small_modal_content > .modal_control #recovery_button:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow:
        0 18px 40px rgba(6, 132, 176, .24),
        0 12px 28px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,79,108,.2);
}
#small_modal_content > #registration_form_box .large_button:active,
#small_modal_content > #guest_form_box .large_button:active,
#small_modal_content > #login_form_box .large_button:active,
#small_modal_content > .modal_control #recovery_button:active{
    transform: translateY(0);
}
#small_modal_content > #registration_form_box .large_button i,
#small_modal_content > #guest_form_box .large_button i,
#small_modal_content > #login_form_box .large_button i,
#small_modal_content > .modal_control #recovery_button i{
    margin-right: 8px;
}
#small_modal_content > #login_form_box .forgot_pass_elem,
#small_modal_content > #registration_form_box .rules_text_elem{
    text-align: center !important;
}
#small_modal_content > #login_form_box .forgot_password,
#small_modal_content > #registration_form_box .rules_text{
    color: rgba(224, 236, 250, .74) !important;
}
#small_modal_content > #login_form_box .forgot_password:hover,
#small_modal_content > #registration_form_box .rules_click:hover{
    color: #7fdcff;
}
#small_modal_content > #registration_form_box .rules_click{
    color: #9de8ff !important;
    font-weight: 700 !important;
}
#small_modal_content > #registration_form_box .recapcha_div,
#small_modal_content > #guest_form_box .recapcha_div{
    margin-top: 2px !important;
    border-radius: 18px !important;
    background: rgba(7, 15, 28, .56) !important;
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px !important;
}
@media (max-width: 700px){
    body #small_modal #small_modal_in:has(#login_form_box),
    body #small_modal #small_modal_in:has(#registration_form_box),
    body #small_modal #small_modal_in:has(#guest_form_box),
    body #small_modal #small_modal_in:has(#recovery_email){
        max-width: min(420px, calc(100vw - 18px)) !important;
        padding: 24px 16px 18px !important;
        border-radius: 22px !important;
    }
    #small_modal_content > #login_form_box .modal_title,
    #small_modal_content > #registration_form_box .modal_title,
    #small_modal_content > #guest_form_box .modal_title,
    #small_modal_content > .modal_title:has(+ .modal_content #recovery_email){
        font-size: 24px;
        padding-bottom: 16px;
    }
    #small_modal_content > #login_form_box .full_input,
    #small_modal_content > #registration_form_box .full_input,
    #small_modal_content > #guest_form_box .full_input,
    #small_modal_content > .modal_content #recovery_email,
    #small_modal_content > #login_form_box select,
    #small_modal_content > #registration_form_box select,
    #small_modal_content > #guest_form_box select,
    #small_modal_content > #registration_form_box .large_button,
    #small_modal_content > #guest_form_box .large_button,
    #small_modal_content > #login_form_box .large_button,
    #small_modal_content > .modal_control #recovery_button{
        min-height: 48px;
        border-radius: 14px;
        font-size: 15px;
    }
    #small_modal_content > #registration_form_box .date_form,
    #small_modal_content > #guest_form_box .date_form{
        grid-template-columns: 1fr;
    }
    #info_section .insection_info{
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 14px;
        border-radius: 18px;
    }
    #info_section .insection_info_icon{
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 14px;
    }
    #info_section .insection_info_content .text_small{
        font-size: 14px;
        line-height: 1.55;
    }
    #info_section .insection_info:last-child .text_small:not(:first-child){
        padding-left: 18px;
    }
}
@media (max-width: 420px){
    body #small_modal #small_modal_in:has(#login_form_box),
    body #small_modal #small_modal_in:has(#registration_form_box),
    body #small_modal #small_modal_in:has(#guest_form_box),
    body #small_modal #small_modal_in:has(#recovery_email){
        max-width: calc(100vw - 12px) !important;
        padding: 22px 12px 16px !important;
        border-radius: 18px !important;
    }
    #small_modal_content > #login_form_box .modal_title,
    #small_modal_content > #registration_form_box .modal_title,
    #small_modal_content > #guest_form_box .modal_title,
    #small_modal_content > .modal_title:has(+ .modal_content #recovery_email){
        font-size: 22px;
    }
    #small_modal_content > #registration_form_box .register_date,
    #small_modal_content > #guest_form_box .register_date,
    #small_modal_content > #registration_form_box .recapcha_div,
    #small_modal_content > #guest_form_box .recapcha_div{
        padding: 10px;
        border-radius: 16px;
    }
    #info_section .insection_info{
        grid-template-columns: 1fr;
        text-align: left;
        gap: 10px;
    }
    #info_section .insection_info_icon{
        margin: 0 auto 2px 0;
    }
}

.intro_social_marquee{
    position: relative;
    width: min(320px, 100%);
    height: 110px;
    margin: 16px auto 0;
    overflow: hidden;
    border-radius: 16px;
    opacity: .82;
    filter: saturate(.92);
    transform: scale(.94);
    transform-origin: center top;
}
.intro_radio_shell{
    width: 100%;
    margin: 16px auto 16px;
}
.intro_radio_panel{
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 6px 14px 8px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 231, 193, .14);
    background:
        radial-gradient(circle at 16% 18%, rgba(40, 207, 255, .12), rgba(40, 207, 255, 0) 26%),
        radial-gradient(circle at 86% 16%, rgba(255, 155, 51, .12), rgba(255, 155, 51, 0) 24%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(7, 10, 16, .96), rgba(4, 7, 12, .98));
    box-shadow:
        0 16px 34px rgba(0,0,0,.30),
        0 0 0 1px rgba(255,255,255,.015),
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
    isolation: isolate;
}
.intro_radio_panel,
.intro_login_btn,
.intro_guest_btn{
    --hero-unify-border: rgba(255,255,255,.08);
}
.intro_radio_panel::before{
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 8px;
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 145, 41, .18) 0%, rgba(255, 145, 41, 0) 72%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.intro_radio_panel::after{
    content: "";
    position: absolute;
    top: 44px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, rgba(81, 220, 255, 0), rgba(81, 220, 255, .26), rgba(81, 220, 255, 0));
    opacity: .8;
    pointer-events: none;
    z-index: 0;
}
.intro_radio_trim{
    position: relative;
    height: 8px;
    margin: 0 6px 4px;
    z-index: 1;
}
.intro_radio_trim::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 229, 188, .64), rgba(255,255,255,.9) 18%, rgba(255, 229, 188, .64) 36%, rgba(255,255,255,.9) 50%, rgba(255, 229, 188, .64) 64%, rgba(255,255,255,.9) 82%, rgba(255, 229, 188, .64));
    box-shadow: 0 0 8px rgba(255, 214, 140, .18);
}
.intro_radio_trim::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 7px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 240, 214, .78);
    border-left: 0;
    border-right: 0;
    clip-path: polygon(0 50%, 8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%);
    background: rgba(255, 214, 140, .08);
}
.intro_radio_trim_bottom{
    margin: 6px 6px 0;
}
.intro_radio_visualizer{
    position: relative;
    z-index: 1;
    min-height: 52px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    padding: 1px 6px 3px;
    margin-bottom: 2px;
}
.intro_radio_eq_bar{
    width: 7px;
    height: 40px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248, 235, 209, .84));
    box-shadow:
        0 0 8px rgba(255, 239, 220, .08),
        0 0 18px rgba(255, 136, 42, .08);
    transform-origin: bottom center;
    transform: scaleY(.22);
    will-change: transform, opacity;
}
.intro_radio_slider_zone{
    position: relative;
    z-index: 1;
    padding: 0 6px;
    margin-bottom: 6px;
}
.intro_player_volume{
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
}
.intro_radio_slider_box{
    padding: 8px 12px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% -30%, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(29, 35, 42, .96), rgba(12, 15, 20, .96));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 20px rgba(0,0,0,.18);
}
.intro_radio_volume_knob{
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 32% 30%, rgba(255, 194, 92, .34), rgba(255, 194, 92, 0) 38%),
        linear-gradient(180deg, rgba(83, 42, 6, .94), rgba(36, 17, 4, .98));
    border: 1px solid rgba(255, 170, 82, .24);
    box-shadow:
        0 0 0 5px rgba(255, 146, 27, .08),
        0 8px 18px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.07);
}
.intro_radio_volume_knob i{
    color: #ffe7bf;
    font-size: 16px;
    text-shadow: 0 0 12px rgba(255, 170, 82, .3);
}
.intro_radio_side_control{
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
        linear-gradient(180deg, rgba(17, 29, 51, .94), rgba(9, 18, 35, .96));
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    box-shadow:
        0 10px 22px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.intro_radio_side_control i{
    font-size: 16px;
}
.intro_radio_side_control.player_change{
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.intro_radio_side_control.player_change:hover{
    transform: translateY(-1px);
    background: rgba(255, 157, 54, .08);
    border-color: rgba(255, 170, 82, .14);
}
.intro_radio_side_glow{
    display: none;
}
.intro_radio_now_playing{
    min-width: 0;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 auto 3px;
}
.intro_radio_now_playing .theme_color{
    color: #9ae9ff !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1px;
}
.intro_radio_now_playing #current_station{
    color: #fbf7ef;
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 0 18px rgba(255, 158, 48, .08);
    font-family: var(--ld-font-display);
    letter-spacing: -.025em;
}
.intro_radio_live_meta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 6px;
    padding: 0 12px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.intro_radio_live_chip{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(81, 220, 255, .08);
    border: 1px solid rgba(81, 220, 255, .14);
    color: #97ecff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(81, 220, 255, .04),
        0 8px 20px rgba(0,0,0,.12);
    overflow: hidden;
}
.intro_radio_live_chip::after{
    content: "";
    position: absolute;
    inset: 1px auto 1px -34%;
    width: 28%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
    transform: skewX(-18deg);
    animation: introLiveChipSweep 5.4s ease-in-out infinite;
    pointer-events: none;
}
.intro_radio_live_chip i{
    font-size: 11px;
    color: #67f5bf;
    text-shadow: 0 0 10px rgba(103, 245, 191, .32);
    animation: introRadioLivePulse 1.9s ease-in-out infinite;
}
.intro_radio_live_user{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 18px rgba(0,0,0,.12);
}
.intro_radio_live_avatar{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.intro_radio_live_avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.intro_radio_live_name{
    color: #f8fbff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.intro_radio_live_meta.intro-rank-owner .intro_radio_live_user{
    border-color: rgba(255, 208, 84, .16);
    box-shadow: 0 0 0 1px rgba(255, 208, 84, .08), inset 0 1px 0 rgba(255,255,255,.04);
}
.intro_radio_live_meta.intro-rank-owner .intro_radio_live_name{ color: #ffd46b; }
.intro_radio_live_meta.intro-rank-super-admin .intro_radio_live_user{ border-color: rgba(255, 154, 60, .16); }
.intro_radio_live_meta.intro-rank-super-admin .intro_radio_live_name{ color: #ff9a3c; }
.intro_radio_live_meta.intro-rank-admin .intro_radio_live_user{ border-color: rgba(255, 226, 91, .16); }
.intro_radio_live_meta.intro-rank-admin .intro_radio_live_name{ color: #ffe25b; }
.intro_radio_live_meta.intro-rank-moderator .intro_radio_live_user{ border-color: rgba(214, 219, 228, .15); }
.intro_radio_live_meta.intro-rank-moderator .intro_radio_live_name{ color: #dfe4ed; }
.intro_radio_live_meta.intro-rank-vip .intro_radio_live_user{ border-color: rgba(173, 109, 255, .16); }
.intro_radio_live_meta.intro-rank-vip .intro_radio_live_name{ color: #b785ff; }
.intro_radio_play_button{
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 36%),
        radial-gradient(circle at 50% 30%, rgba(255, 193, 94, .46), rgba(255, 193, 94, 0) 52%),
        linear-gradient(180deg, rgba(255, 180, 74, .24), rgba(148, 69, 7, .46)),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    border: 1px solid rgba(255, 177, 81, .24);
    box-shadow:
        0 0 0 4px rgba(255, 135, 0, .05),
        0 10px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.intro_radio_play_button i{
    font-size: 21px;
    color: #fffaf0;
    text-shadow: 0 0 14px rgba(255, 190, 101, .28);
}
.intro_radio_play_button:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 0 6px rgba(255, 135, 0, .06),
        0 12px 22px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08);
    filter: brightness(1.04);
}
.intro_station_wrap{
    max-width: 100%;
    margin: 8px auto 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .32s ease, opacity .22s ease, transform .22s ease;
}
.intro_station_wrap.open{
    max-height: 920px;
    opacity: 1;
    transform: translateY(0);
}
.intro_station_wrap .hpad10.vpad5{
    padding-top: 10px;
    padding-bottom: 8px;
    font-family: var(--ld-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}
.intro_station_wrap .text_small{
    text-align: left;
    color: rgba(223, 238, 255, .84);
}
.intro_station_wrap #login_station_list.station_grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}
.intro_station_wrap #login_station_list.station_grid > *{
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(10, 22, 40, .78), rgba(8, 18, 33, .76));
    padding: 10px 12px;
    color: #eef7ff;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.intro_station_wrap #login_station_list.station_grid > *:hover{
    background: rgba(36, 207, 255, .08);
    border-color: rgba(101, 221, 255, .14);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.intro_station_wrap #login_station_list .is-current{
    border-color: rgba(111, 228, 255, .22);
    box-shadow: 0 0 0 2px rgba(111, 228, 255, .08);
}
body #intro_radio_shell .ui-widget-content{
    border: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 8px 18px rgba(0,0,0,.18);
}
body #intro_radio_shell .ui-slider-range{
    background: linear-gradient(90deg, #ffffff, #fff8ee);
    border-radius: 999px;
}
body #intro_radio_shell .ui-slider-handle{
    width: 16px;
    height: 16px;
    top: -5px;
    border-radius: 50%;
    border: 2px solid #fff8ef;
    background: linear-gradient(180deg, #ffffff, #f0eee8);
    box-shadow:
        0 8px 18px rgba(0,0,0,.22),
        0 0 16px rgba(255, 166, 51, .16);
}
@keyframes introRadioLivePulse{
    0%, 100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.08); opacity: .78; }
}
@keyframes introLiveChipSweep{
    0%, 18%{ transform: translateX(0) skewX(-18deg); opacity: 0; }
    26%{ opacity: .95; }
    46%, 100%{ transform: translateX(440%) skewX(-18deg); opacity: 0; }
}
.intro_social_marquee::before,
.intro_social_marquee::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42px;
    z-index: 3;
    pointer-events: none;
}
.intro_social_marquee::before{
    left: 0;
    background: linear-gradient(90deg, rgba(8, 18, 33, .96), rgba(8, 18, 33, 0));
}
.intro_social_marquee::after{
    right: 0;
    background: linear-gradient(-90deg, rgba(8, 18, 33, .96), rgba(8, 18, 33, 0));
}
.intro_social_marquee_row{
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    will-change: transform;
}
.intro_social_marquee_row_one{
    top: 8px;
    animation: introSocialMarquee 16s linear infinite;
}
.intro_social_marquee_row_two{
    top: 58px;
    animation: introSocialMarquee 20s linear infinite reverse;
}
.intro_social_link{
    display: inline-flex;
    text-decoration: none;
}
.intro_social_button{
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.intro_social_button img{
    width: 100%;
    height: 100%;
    display: block;
}
.intro_social_link:hover .intro_social_button{
    transform: translateY(-2px) scale(1.06);
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.24);
}
@keyframes introSocialMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
.intro_active_stats_wrap{
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 10px;
}
.intro_active_stat_card{
    min-width: 138px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(18, 30, 52, .94), rgba(10, 20, 38, .92));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 10px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.intro_active_stat_card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.12);
    box-shadow:
        0 16px 30px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.intro_active_stat_icon{
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.intro_active_stat_icon_male{
    background: linear-gradient(135deg, rgba(37, 207, 255, .26), rgba(24, 138, 255, .38));
    border: 1px solid rgba(87, 211, 255, .2);
}
.intro_active_stat_icon_female{
    background: linear-gradient(135deg, rgba(255, 105, 180, .24), rgba(180, 79, 255, .34));
    border: 1px solid rgba(255, 141, 204, .18);
}
.intro_active_stat_icon_vip{
    background: linear-gradient(135deg, rgba(255, 193, 51, .24), rgba(255, 138, 40, .34));
    border: 1px solid rgba(255, 208, 84, .18);
}
.intro_active_stat_meta{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.intro_active_stat_meta strong{
    color: #f8fbff;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
}
.intro_active_stat_meta span{
    margin-top: 3px;
    color: rgba(221, 232, 248, .78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.intro_active_users_strip{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
    padding: 10px 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(8, 16, 30, .58), rgba(6, 13, 24, .42));
    border: 1px solid rgba(255,255,255,.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 14px 30px rgba(0,0,0,.12);
    filter: saturate(.88);
}
.intro_active_users_strip::before,
.intro_active_users_strip::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    z-index: 2;
    pointer-events: none;
}
.intro_active_users_strip::before{
    left: 0;
    background: linear-gradient(90deg, rgba(8, 18, 33, 1), rgba(8, 18, 33, 0));
}
.intro_active_users_strip::after{
    right: 0;
    background: linear-gradient(-90deg, rgba(8, 18, 33, 1), rgba(8, 18, 33, 0));
}
.intro_active_users_track{
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 0 12px;
    animation: introActiveUsersMarquee 28s linear infinite;
    will-change: transform;
}
.intro_active_users_strip:hover .intro_active_users_track{
    animation-play-state: paused;
}
.intro_active_user_card{
    min-width: 154px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px 7px 7px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(10, 20, 38, .84), rgba(17, 31, 58, .68));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow:
        0 8px 20px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(5px);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.intro_active_user_card:hover{
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.04);
}
.intro_active_user_avatar{
    width: 38px;
    min-width: 38px;
    height: 38px;
    position: relative;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid rgba(255,255,255,.22);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.intro_active_user_avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.intro_active_user_meta{
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.intro_active_user_name{
    color: #ffffff;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.intro_active_user_dot{
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2fd36b;
    border: 2px solid #081221;
    box-shadow: 0 0 0 2px rgba(47, 211, 107, .18);
}
.intro_active_user_card.intro-rank-owner{
    border-color: rgba(255, 208, 84, .5);
    box-shadow: 0 0 0 1px rgba(255, 208, 84, .08), 0 6px 14px rgba(255, 193, 51, .1);
}
.intro_active_user_card.intro-rank-owner .intro_active_user_avatar{
    border-color: rgba(255, 219, 117, .92);
}
.intro_active_user_card.intro-rank-owner .intro_active_user_name{
    color: #ffd46b;
}
.intro_active_user_card.intro-rank-super-admin{
    border-color: rgba(255, 154, 60, .5);
    box-shadow: 0 0 0 1px rgba(255, 154, 60, .07), 0 6px 14px rgba(255, 132, 31, .09);
}
.intro_active_user_card.intro-rank-super-admin .intro_active_user_avatar{
    border-color: rgba(255, 168, 84, .92);
}
.intro_active_user_card.intro-rank-super-admin .intro_active_user_name{
    color: #ff9a3c;
}
.intro_active_user_card.intro-rank-admin{
    border-color: rgba(255, 226, 91, .5);
    box-shadow: 0 0 0 1px rgba(255, 226, 91, .07), 0 6px 14px rgba(255, 226, 91, .09);
}
.intro_active_user_card.intro-rank-admin .intro_active_user_avatar{
    border-color: rgba(255, 235, 140, .92);
}
.intro_active_user_card.intro-rank-admin .intro_active_user_name{
    color: #ffe25b;
}
.intro_active_user_card.intro-rank-moderator{
    border-color: rgba(214, 219, 228, .5);
    box-shadow: 0 0 0 1px rgba(214, 219, 228, .07), 0 6px 14px rgba(197, 203, 214, .08);
}
.intro_active_user_card.intro-rank-moderator .intro_active_user_avatar{
    border-color: rgba(229, 234, 241, .92);
}
.intro_active_user_card.intro-rank-moderator .intro_active_user_name{
    color: #dfe4ed;
}
.intro_active_user_card.intro-rank-vip{
    border-color: rgba(173, 109, 255, .54);
    box-shadow: 0 0 0 1px rgba(173, 109, 255, .08), 0 6px 14px rgba(146, 82, 255, .1);
}
.intro_active_user_card.intro-rank-vip .intro_active_user_avatar{
    border-color: rgba(188, 141, 255, .92);
}
.intro_active_user_card.intro-rank-vip .intro_active_user_name{
    color: #b785ff;
}
@keyframes introActiveUsersMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* section css */
.out_section{width:100%;height:auto;position:relative}
.section { width:100%; height:auto; margin:0 auto; }
.section_content {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}
.section_inside {
    margin: 0 auto;
    padding: 42px 0;
}

#description_section,
#features_section,
#info_section{
    color: #ffffff;
}

#description_section .insection_title,
#features_section .insection_title,
#info_section .insection_title,
#description_section .text_title,
#features_section .text_title,
#info_section .text_title,
#description_section .text_text,
#features_section .text_text,
#info_section .text_text,
#description_section .text_small,
#features_section .text_small,
#info_section .text_small,
#description_section .insection_feature_title,
#features_section .insection_feature_title,
#info_section .insection_feature_title,
#description_section p,
#features_section p,
#info_section p{
    color: #ffffff !important;
}

#description_section a,
#features_section a,
#info_section a{
    color: #8fd3ff !important;
}

/* description section redesign */
#description_section .bborder.bpad20{
    border-bottom-color: rgba(255,255,255,.08) !important;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
#description_section .tmargin20{
    display: grid;
    gap: 28px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
#description_section .insection_desc{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: start;
    gap: 34px;
    padding: 32px 34px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        radial-gradient(circle at top left, rgba(81, 220, 255, .05), rgba(81, 220, 255, 0) 42%),
        radial-gradient(circle at bottom right, rgba(255, 180, 94, .04), rgba(255, 180, 94, 0) 34%),
        rgba(8, 16, 30, .5);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        0 20px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}
#description_section .insection_desc::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.04), rgba(255,255,255,0) 36%);
    opacity: .5;
    pointer-events: none;
}
#description_section .insection_desc:nth-child(even) .insection_desc_image{
    order: 2;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}
#description_section .insection_desc:nth-child(even) .insection_desc_content{
    order: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}
#description_section .insection_desc_image,
#description_section .insection_desc_content{
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
#description_section .insection_desc_image{
    position: relative;
    align-self: start;
    padding-top: 6px;
}
#description_section .insection_desc .insection_image_fit{
    width: 100%;
    border-radius: 0;
    border: 0 !important;
    box-shadow: none;
    background: transparent !important;
}
#description_section .insection_desc_content{
    padding: 0 !important;
}
#description_section .insection_desc_content .centered_element{
    width: 100%;
    display: block;
    text-align: left !important;
}
#description_section .text_title{
    margin: 0 0 11px 0;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9de8ff !important;
    font-family: var(--ld-font-display);
}
#description_section .text_text{
    margin: 0 0 22px 0;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(236, 245, 255, .8) !important;
    max-width: 55ch;
}
#description_section .text_text:last-child{
    margin-bottom: 0;
}
#description_section .insection_desc:nth-child(1) .text_title:nth-of-type(1)::before,
#description_section .insection_desc:nth-child(2) .text_title:nth-of-type(1)::before{
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    margin: 0 10px 4px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #34d5ff, rgba(52, 213, 255, 0));
}
#description_section .insection_desc:nth-child(1)::before,
#description_section .insection_desc:nth-child(2)::before{
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.24);
}
#description_section .insection_desc:nth-child(1)::before{
    content: "01";
}
#description_section .insection_desc:nth-child(2)::before{
    content: "02";
}

#info_section .bborder.bpad20{
    border-bottom-color: rgba(255,255,255,.08) !important;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
#info_section .tmargin20{
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
#info_section .insection_info{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 24px 24px 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        radial-gradient(circle at top left, rgba(81, 220, 255, .04), rgba(81, 220, 255, 0) 44%),
        rgba(8, 16, 30, .48);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    position: relative;
    overflow: hidden;
}
#info_section .insection_info::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.04), rgba(255,255,255,0) 36%);
    opacity: .5;
    pointer-events: none;
}
#info_section .insection_info:hover{
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(8, 16, 30, .58);
    border-color: rgba(143, 211, 255, .16);
    box-shadow:
        0 16px 36px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06);
}
#info_section .insection_info_icon{
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#info_section .insection_info:nth-child(1) .insection_info_icon{
    background: rgba(118, 196, 0, .12);
}
#info_section .insection_info:nth-child(2) .insection_info_icon{
    background: rgba(255, 179, 0, .12);
}
#info_section .insection_info:nth-child(3) .insection_info_icon{
    background: rgba(255, 75, 75, .1);
}
#info_section .insection_info_content{
    padding: 2px 0 0;
    position: relative;
    z-index: 1;
}
#info_section .insection_info_content p:last-child{
    margin-bottom: 0 !important;
}
#info_section .insection_info_content .text_small{
    font-size: 15px;
    line-height: 1.72;
    color: rgba(238, 246, 255, .9) !important;
}
#info_section .insection_info_content .text_small:first-child{
    font-size: 16px;
}
#info_section .insection_info_content .text_small .bold{
    color: #ffffff;
}
#info_section .insection_info:last-child .text_small.bmargin10{
    margin-bottom: 8px !important;
}
#info_section .insection_info:last-child .text_small:not(:first-child){
    position: relative;
    padding-left: 22px;
}
#info_section .insection_info:last-child .text_small:not(:first-child)::before{
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(143, 211, 255, .9);
    box-shadow: 0 0 0 4px rgba(143, 211, 255, .08);
}
#info_section .rule_help_btn{
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(143, 211, 255, .12) !important;
    border: 1px solid rgba(143, 211, 255, .18);
    color: #b8e8ff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#info_section .rule_help_btn:hover{
    background: rgba(143, 211, 255, .18) !important;
    color: #ffffff !important;
}

/* responsive image */
.insection_image_fit{width:100%;max-width:700px;height:auto;display:block}

/* section title */
.insection_intro{display:table;table-layout:fixed;width:auto;margin:0 auto}
.insection_identifier{
    width:44px;
    height:44px;
    font-size:20px;
    text-align:center;
    border-radius:50%;
    box-shadow:
        0 10px 26px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.insection_title{
    padding:0 12px;
    font-family: var(--ld-font-display);
    letter-spacing: -.03em;
    line-height: 1.04;
}

/* section info */
.insection_info_icon{width:36px;font-size:30px;text-align:center;position:relative}
.insection_info_icon img{width:36px;height:36px;display:block}
.insection_info_content{padding:0 8px}

/* section features*/
.insection_feature{
    width:25%;
    float:left;
    padding:30px 15px;
}
.insection_feature_icon img{width:80px;height:80px;display:block;margin:0 auto}
.insection_feature_title{
    font-weight: 700;
    letter-spacing: .15px;
}

#features_section .bborder.bpad20{
    border-bottom-color: rgba(255,255,255,.08) !important;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
#features_section .tmargin20{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
#features_section .insection_feature{
    width: auto;
    float: none;
    padding: 24px 20px 22px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        radial-gradient(circle at top center, rgba(81, 220, 255, .05), rgba(81, 220, 255, 0) 46%),
        rgba(8, 16, 30, .46);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        0 18px 38px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#features_section .insection_feature:hover{
    transform: translateY(-3px);
    border-color: rgba(143, 211, 255, .18);
    box-shadow:
        0 22px 40px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06);
}
#features_section .insection_feature_icon{
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
        rgba(17, 27, 48, .78);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 12px 24px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
}
#features_section .insection_feature_icon img{
    width: 54px;
    height: 54px;
}
#features_section .insection_feature_title{
    font-family: var(--ld-font-display);
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.03em;
    max-width: 12ch;
    margin: 0 auto;
}

/* section description */
.insection_desc{
    padding:22px 0;
}
.insection_desc_image{width:50%;position:relative;margin-bottom:10px}
.insection_desc_content{
    width:50%;
    padding:0 12px;
}
.insection_desc .insection_image_fit{
    border-radius: 10px;
}

/* scroll top button */
.login_scrolltop{
    display:none;
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:100;
    cursor:pointer;
}
.login_scrolltop_btn{
    display:table;
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:22px;
    text-align:center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%),
        linear-gradient(180deg, rgba(17, 29, 51, .98), rgba(9, 18, 35, .98)) !important;
    border: 1px solid rgba(255,255,255,.08);
    color: #f3fbff !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.34),
        0 10px 26px rgba(37, 207, 255, .12),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login_scrolltop_btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
        0 20px 46px rgba(0,0,0,.38),
        0 14px 30px rgba(37, 207, 255, .16),
        inset 0 1px 0 rgba(255,255,255,.1);
}

/* footer override */
#main_footer.foot{
    position: relative;
    margin-top: 34px;
    padding: 24px 18px 30px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(7, 15, 29, .98), rgba(5, 11, 22, .98)) !important;
    border-top: 1px solid rgba(255,255,255,.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 -18px 40px rgba(0,0,0,.16);
    color: rgba(229, 239, 250, .82) !important;
    overflow: hidden;
}
#main_footer.foot::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(520px, 72vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(81, 220, 255, 0), rgba(81, 220, 255, .46), rgba(255, 176, 94, .34), rgba(81, 220, 255, 0));
}
#main_footer.foot::after{
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    width: 520px;
    height: 120px;
    transform: translateX(-50%);
    background: radial-gradient(circle at center top, rgba(81, 220, 255, .08), rgba(81, 220, 255, 0) 56%);
    pointer-events: none;
}
#main_footer #menu_main_footer{
    max-width: 1320px;
    margin: 0 auto;
    font-size: 14px;
    position: relative;
    z-index: 1;
}
#main_footer #menu_main_footer ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#main_footer #menu_main_footer li{
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    color: rgba(229, 239, 250, .78);
}
#main_footer #menu_main_footer li:first-child{
    color: rgba(244, 249, 255, .94);
    font-weight: 600;
}
#main_footer #menu_main_footer li:not(:first-child){
    padding: 8px 2px;
    position: relative;
}
#main_footer #menu_main_footer li:not(:first-child)::before{
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(140, 160, 182, .42);
}
#main_footer #menu_main_footer li a,
#main_footer #menu_main_footer li.bclick{
    color: rgba(220, 235, 248, .88) !important;
    text-decoration: none !important;
    transition: color .18s ease, opacity .18s ease, transform .18s ease, text-shadow .18s ease;
}
#main_footer #menu_main_footer li a:hover,
#main_footer #menu_main_footer li.bclick:hover{
    color: #ffffff !important;
    transform: translateY(-1px);
    text-shadow: 0 0 16px rgba(81, 220, 255, .14);
}
#main_footer #menu_main_footer .theme_color{
    color: #39cfff !important;
    text-shadow: 0 0 18px rgba(57, 207, 255, .1);
}

@keyframes introAuroraDrift{
    0%{ transform: translate3d(0, 0, 0) scale(1); }
    100%{ transform: translate3d(2vw, 2vh, 0) scale(1.08); }
}
@keyframes introAuroraDriftAlt{
    0%{ transform: translate3d(0, 0, 0) scale(1); }
    100%{ transform: translate3d(-2vw, 2vh, 0) scale(1.06); }
}

/* responsive */
@media screen and (max-width:1120px){
	.section_inside { width:100%; }
    .section_content{
        padding: 0 14px;
    }
}
@media screen and (max-width:940px){
	.insection_feature{ width: 50%; }
    #features_section .tmargin20{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width:640px){
	.insection_feature{ width: 100%; }
	.insection_desc_image,.insection_desc_content{ width: 100%;}
    .section_content{
        padding: 0 10px;
    }
    #description_section > .section_content,
    #features_section > .section_content,
    #info_section > .section_content{
        padding-left: 0;
        padding-right: 0;
    }
    #login_logo{
        height: 64px;
    }
    .section_inside{
        padding: 30px 0;
    }
    #description_section .bborder.bpad20,
    #features_section .bborder.bpad20,
    #info_section .bborder.bpad20{
        width: 100%;
        margin: 0;
        padding: 14px 14px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .intro_active_heading_wrap{
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        opacity: .92;
    }
    .intro_active_heading_wrap .insection_identifier{
        width: 34px;
        min-width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .intro_active_heading_wrap .insection_title{
        font-size: clamp(16px, 4.8vw, 20px) !important;
        line-height: 1.05;
        max-width: 170px;
    }
    .intro_active_users_wrap{
        margin-top: 12px !important;
        opacity: .88;
    }
    .intro_active_stats_wrap{
        gap: 8px;
        margin: 10px 0 8px;
    }
    .intro_active_stat_card{
        min-width: 112px;
        padding: 8px 10px;
        gap: 9px;
        border-radius: 14px;
    }
    .intro_active_stat_icon{
        width: 32px;
        min-width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 14px;
    }
    .intro_active_stat_meta strong{
        font-size: 15px;
    }
    .intro_active_stat_meta span{
        font-size: 9px;
    }
    .insection_intro{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0 auto;
    }
    .insection_identifier{
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .insection_title{
        padding: 0;
        margin: 0;
        display: block;
        width: auto;
        font-size: clamp(22px, 5.3vw, 28px) !important;
        line-height: 1.14;
        text-align: center !important;
        text-wrap: balance;
        flex: 0 1 auto;
        max-width: 260px;
    }
    .login_text{
        max-width: 92%;
        padding: 18px 20px 22px;
        border-radius: 24px;
    }
    .login_text::before{
        top: 14px;
        width: 68px;
    }
    #description_section .insection_desc{
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px 14px;
        border-radius: 22px;
    }
    #description_section .insection_desc:nth-child(even) .insection_desc_image,
    #description_section .insection_desc:nth-child(even) .insection_desc_content{
        order: initial;
        grid-column: auto;
        grid-row: auto;
    }
    #description_section .insection_desc_image{
        width: 100% !important;
        padding-top: 0;
    }
    #description_section .insection_desc_content{
        width: 100% !important;
    }
    #description_section .insection_desc .insection_image_fit{
        border-radius: 0;
        max-width: 100%;
        margin: 0 auto;
        max-height: 220px;
        object-fit: contain;
    }
    #description_section .insection_desc_content .centered_element{
        text-align: left !important;
        max-width: 100%;
    }
    #description_section .text_title{
        font-size: 13px;
        margin-bottom: 8px;
    }
    #description_section .text_text{
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 14px;
        max-width: none;
    }
    #description_section .insection_desc:nth-child(1)::before,
    #description_section .insection_desc:nth-child(2)::before{
        top: 14px;
        left: 16px;
        font-size: 10px;
    }
    #features_section .tmargin20{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    #features_section .insection_feature{
        padding: 18px 16px;
        border-radius: 20px;
    }
    #features_section .insection_feature_icon{
        width: 74px;
        height: 74px;
        border-radius: 20px;
    }
    #features_section .insection_feature_icon img{
        width: 46px;
        height: 46px;
    }
    #features_section .insection_feature_title{
        font-size: 18px;
        max-width: none;
    }
    #info_section .insection_info{
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 16px;
        border-radius: 20px;
    }
    #info_section .insection_info_icon{
        width: 46px;
        min-width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 22px;
    }
    #info_section .insection_info_content .text_small{
        font-size: 14px;
        line-height: 1.56;
    }
    #main_footer.foot{
        padding: 18px 14px 24px !important;
    }
    #main_footer #menu_main_footer ul{
        gap: 8px 14px;
    }
    .login_scrolltop{
        right: 14px;
        bottom: 14px;
    }
    .login_scrolltop_btn{
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 20px;
    }
    .intro_login_btn.large_button_rounded{
        width: 206px;
        min-width: 206px;
        max-width: 206px;
        min-height: 52px;
        font-size: 16px;
        border-radius: 18px;
        padding: 0 20px;
    }
    .intro_guest_btn.small_button_rounded{
        width: auto;
        min-width: 0;
        min-height: 48px;
        font-size: 14px;
        padding: 0 18px;
        border-radius: 18px;
    }
    .login_text .text_xlarge{
        font-size: clamp(26px, 7.2vw, 36px);
        line-height: 1.02;
    }
    .login_text .text_med{
        font-size: clamp(14px, 4.2vw, 17px);
        line-height: 1.46;
        max-width: 30ch;
    }
    #intro_chat_float_layer .intro-float-bubble:nth-child(n+12){
        display: none;
    }
    .intro-social-flow_three,
    .intro-social-network{
        display: none;
    }
    .intro-social-card{
        opacity: .24;
        transform: scale(.92);
    }
    .intro-social-ping{
        opacity: .56;
    }
    .intro-float-bubble{
        padding: 6px 9px 6px 6px;
        gap: 6px;
    }
    .intro-float-avatar{
        width: calc(var(--bubble-size) * .68);
        height: calc(var(--bubble-size) * .68);
        min-width: calc(var(--bubble-size) * .68);
    }
    .intro-float-name{
        font-size: 10px;
        max-width: 84px;
    }
    .intro-float-typing{
        margin-top: 2px;
    }
    .intro-float-typing i{
        width: 4px;
        height: 4px;
    }
    .intro-reaction-bubble{
        width: calc(var(--reaction-size) * .9);
        height: calc(var(--reaction-size) * .9);
    }
    .intro_social_marquee{
        width: min(280px, 100%);
        height: 98px;
        margin-top: 14px;
    }
    .intro_radio_panel{
        width: min(100%, 720px);
        padding: 6px 9px 8px;
        border-radius: 18px;
    }
    .intro_radio_visualizer{
        gap: 3px;
        min-height: 42px;
    }
    .intro_radio_eq_bar{
        width: 6px;
        height: 32px;
    }
    .intro_player_volume{
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
        gap: 8px;
    }
    .intro_radio_side_control{
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
    .intro_radio_side_control i{
        font-size: 14px;
    }
    .intro_radio_volume_knob{
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
    .intro_radio_volume_knob i{
        font-size: 15px;
    }
    .intro_radio_now_playing #current_station{
        font-size: 15px;
    }
    .intro_radio_play_button{
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
    .intro_radio_play_button i{
        font-size: 18px;
    }
    .intro_radio_live_meta{
        gap: 8px;
        margin-bottom: 5px;
    }
    .intro_radio_live_chip{
        padding: 5px 9px;
        font-size: 9px;
    }
    .intro_radio_live_user{
        padding: 4px 9px 4px 4px;
    }
    .intro_radio_live_avatar{
        width: 24px;
        height: 24px;
    }
    .intro_radio_live_name{
        font-size: 12px;
    }
    .intro_social_marquee::before,
    .intro_social_marquee::after{
        width: 34px;
    }
    .intro_social_marquee_row{
        gap: 10px;
    }
    .intro_social_marquee_row_one{
        top: 8px;
    }
    .intro_social_marquee_row_two{
        top: 52px;
    }
    .intro_social_button{
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .intro_active_users_strip::before,
    .intro_active_users_strip::after{
        width: 24px;
    }
    .intro_active_users_track{
        gap: 8px;
        padding: 0 8px;
    }
    .intro_active_user_card{
        min-width: 132px;
        padding: 6px 9px 6px 6px;
        gap: 7px;
        border-radius: 999px;
    }
    .intro_active_user_avatar{
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
    .intro_active_user_name{
        font-size: 11px;
    }
    .intro_active_user_dot{
        width: 9px;
        height: 9px;
        border-width: 1.5px;
    }
    .intro_active_users_strip{
        border-radius: 18px;
        padding: 8px 0;
    }
    #main_footer #menu_main_footer li:not(:first-child)::before{
        display: none;
    }
}
@media screen and (max-width:420px){
    #description_section .insection_desc{
        padding: 16px 10px;
        border-radius: 18px;
    }
    .login_text{
        padding: 16px 16px 18px;
        border-radius: 20px;
    }
    .login_text::before{
        top: 12px;
        width: 54px;
    }
    #description_section .text_title{
        font-size: 13px;
        margin-bottom: 7px;
    }
    #description_section .text_text{
        font-size: 13px;
        line-height: 1.46;
        margin-bottom: 12px;
    }
    #description_section .insection_desc .insection_image_fit{
        max-height: 180px;
    }
    .intro_radio_live_meta{
        padding: 0 4px;
        gap: 6px;
    }
    .intro_radio_live_chip{
        padding: 5px 8px;
    }
    .intro_radio_live_name{
        font-size: 11px;
    }
    .intro_active_user_card{
        min-width: 126px;
    }
    #info_section .insection_info{
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 12px;
        border-radius: 18px;
    }
    #info_section .insection_info_icon{
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 14px;
    }
    #info_section .insection_info_content .text_small{
        font-size: 13px;
        line-height: 1.56;
    }
    #features_section .insection_feature{
        padding: 16px 14px;
        border-radius: 18px;
    }
    #features_section .insection_feature_icon{
        width: 68px;
        height: 68px;
        border-radius: 18px;
    }
    .intro_radio_live_meta{
        padding: 0 4px;
    }
    .intro_radio_live_chip{
        padding: 5px 8px;
    }
    .intro_radio_live_name{
        font-size: 11px;
    }
    #features_section .insection_feature_icon img{
        width: 42px;
        height: 42px;
    }
    #features_section .insection_feature_title{
        font-size: 16px;
    }
    #main_footer #menu_main_footer{
        font-size: 13px;
    }
    #main_footer #menu_main_footer ul{
        gap: 6px 12px;
    }
    #intro_top{
        min-height: 400px;
    }
    #intro_top .bcell_mid{
        min-height: 400px;
        padding: 14px 12px 22px;
    }
    .login_text .text_xlarge{
        font-size: clamp(22px, 6.8vw, 30px);
    }
    .intro_login_btn.large_button_rounded{
        width: 186px;
        min-width: 186px;
        max-width: 186px;
        min-height: 48px;
        font-size: 15px;
        padding: 0 18px;
    }
    .intro_guest_btn.small_button_rounded{
        min-width: 146px;
        min-height: 44px;
        font-size: 13px;
        padding: 0 16px;
        border-radius: 16px;
    }
    .login_text .text_med{
        font-size: clamp(13px, 3.9vw, 15px);
        line-height: 1.3;
    }
    .intro-reaction-bubble{
        width: calc(var(--reaction-size) * .78);
        height: calc(var(--reaction-size) * .78);
    }
    .intro-social-flow_two{
        display: none;
    }
    .intro-social-card{
        opacity: .18;
        transform: scale(.88);
    }
    .intro-social-ping{
        opacity: .46;
    }
    .intro_radio_shell{
        margin: 18px auto 14px;
    }
    .intro_radio_panel{
        width: min(100%, 320px);
        padding: 7px 8px 9px;
        border-radius: 16px;
    }
    .intro_radio_trim::after{
        width: 78px;
    }
    .intro_radio_visualizer{
        min-height: 36px;
        gap: 2px;
        padding: 1px 2px 4px;
    }
    .intro_radio_eq_bar{
        width: 5px;
        height: 26px;
    }
    .intro_player_volume{
        grid-template-columns: 32px minmax(0, 1fr) 32px 32px;
        gap: 6px;
    }
    .intro_radio_volume_knob{
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
    .intro_radio_volume_knob i{
        font-size: 13px;
    }
    .intro_radio_side_control{
        width: 32px;
        min-width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .intro_radio_side_control i{
        font-size: 12px;
    }
    .intro_radio_now_playing #current_station{
        font-size: 12px;
    }
    .intro_radio_play_button{
        width: 32px;
        min-width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .intro_radio_play_button i{
        font-size: 14px;
    }
    .intro_social_marquee{
        width: min(244px, 100%);
        height: 92px;
    }
    .intro_social_button{
        width: 34px;
        height: 34px;
    }
    #description_section .bborder.bpad20,
    #features_section .bborder.bpad20,
    #info_section .bborder.bpad20{
        padding: 12px 10px !important;
    }
    .intro_active_heading_wrap{
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
    .intro_active_stats_wrap{
        gap: 6px;
        margin: 8px 0 10px;
    }
    .intro_active_stat_card{
        min-width: 102px;
        padding: 7px 9px;
        gap: 8px;
    }
    .intro_active_stat_icon{
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .intro_active_stat_meta strong{
        font-size: 14px;
    }
    .intro_active_stat_meta span{
        font-size: 8px;
    }
    .intro_active_heading_wrap .insection_title{
        font-size: clamp(14px, 4.8vw, 18px) !important;
        max-width: 150px;
    }
    .insection_intro{
        gap: 10px;
    }
    .insection_identifier{
        width: 34px;
        min-width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .insection_title{
        font-size: clamp(19px, 6vw, 24px) !important;
        line-height: 1.12;
        max-width: 220px;
    }
    .intro_active_users_strip{
        padding: 4px 0;
    }
    .intro_active_users_track{
        gap: 7px;
    }
    .intro_active_user_card{
        min-width: 122px;
        padding: 5px 8px 5px 5px;
        gap: 6px;
    }
    .intro_active_user_avatar{
        width: 30px;
        min-width: 30px;
        height: 30px;
    }
    .intro_active_user_name{
        font-size: 10px;
    }
}