:root {
    --white: #F3F4F5;
    --black: #19191E;
    --black-transparent: #19191E36;
    --ui: #19191E12;
    --ui-slight: #19191E06;
    --ui-stroke: #F3F4F512;
    --ui-stroke-hover: #F3F4F524;
    --ui-stroke-transparent: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF %, #FFFFFF00 100%);
    --ui-height: 44px;
    --ui-stroke-width: 1.85px;
    --ui-rounding: 20px;
    --font-family: "Mulish", sans-serif
}

html,
body {
    height: 100%;
    padding: 0 !important
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    background-color: var(--black);
    font-family: var(--font-family);
    text-decoration: none
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent
}

::-moz-selection {
    color: var(--black);
    background: var(--ui-stroke)
}

::selection {
    color: var(--black);
    background: var(--ui-stroke)
}

:where(grid, bento, items, item, inputbox, hotkey, toggle, blockinfo, info, media, item-shiki, action, selector, icon-button, ui-items) {
    display: block
}

h1 {
    font-size: 64px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    padding: 0
}

h2 {
    font-size: 48px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    padding: 0
}

h3 {
    font-size: 36px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    padding: 0
}

h4,
footer .category {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    padding: 0
}

p {
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    line-height: 140%;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none
}

a.hover-wrapper {
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out
}

a.hover-wrapper::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

a.hover-wrapper:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

.ui-header,
bento .title,
action .container .info .title,
selector .container .info .title,
info .title,
.webring-block .current,
footer .edge-text .webring a {
    font-size: 18px;
    font-weight: 600;
    color: var(--white)
}

.ui-text,
bento .bottom,
bento .center,
bento .title .subtitle,
popup span,
action .container .info,
selector .container .info,
info .container,
inputbox textarea,
inputbox input,
footer .edge-text span,
footer .category .anchors {
    font-size: 15px;
    font-weight: 400;
    color: var(--white)
}

.ui-item-header,
bento .line,
bento .wrapped-items .tag,
.activity .info,
.ui-item .info,
item .item,
media .track .title,
blockinfo,
.webring-block .anchor span {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.ui-item-description,
bento .line span,
.activity .info .description,
.ui-item .info .description,
action .summary,
selector .summary,
item .item .description,
media .playback,
media .track .artist,
toggle,
.webring-block .current span,
.webring-block .current a {
    font-size: 13px;
    font-weight: 300;
    color: var(--white);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.ui-button,
button {
    font-size: 15px;
    font-weight: 525;
    color: var(--white);
    line-height: 100%
}

.website-container {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.75s ease-in-out
}

.app {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: scrollbar-color 0.3s ease-in-out;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important
}

.app::-webkit-scrollbar {
    display: none !important
}

.header {
    transition: all 1s ease-out;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 48px 48px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.header .side {
    display: flex;
    align-items: center;
    gap: 32px;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill
}

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

.header .near {
    display: flex;
    align-items: center;
    gap: 12px
}

.header button {
    transition: all 0.2s ease-in-out
}

.header .shrinked {
    opacity: 0;
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    transition: all 1s ease-in-out !important
}

.header.in-iframe {
    padding: 24px 24px 0px;
}

.header.in-iframe .shrinked {
    opacity: 1;
    width: 160px;
    padding-left: 12px;
    padding-right: 12px
}

.header.in-iframe .shrinked.mobileshow {
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 44px
}

@media screen and (max-width: 1400px) {
    .header blockinfo span {
        width: 50px
    }
}

.mobileshow {
    display: none
}

.home {
    z-index: -1;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 148px 48px 64px;
    box-sizing: border-box;
    background-image: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24));
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    transition: background-position 0.1s ease-out;
    overflow: hidden
}

.home .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none
}

.home .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 104%;
    min-height: 104%;
    width: auto;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.75);
    transform: translate(-50%, -50%) scale(1.04);
    transform-origin: center center;
    will-change: transform;
    pointer-events: none
}

.home .sidetext {
    transition: all 1.25s ease-out !important;
    max-height: -webkit-fill-available;
    max-height: -moz-available;
    max-height: stretch;
    height: 100%;
    width: auto
}

.home .sideline {
    transition: all 1.1s ease-out;
    opacity: 0.48;
    width: 2px;
    height: 100%;
    background-color: var(--white);
    border-radius: 4px
}

.scroll {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--white);
    box-sizing: border-box;
    font-weight: 600;
    bottom: 36px;
    width: 100%
}

.bg-author {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 12px;
    opacity: 0.72;
    color: var(--white)
}

.home-propage {
    height: 100%;
    width: 100%
}

.main-page {
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(19, 19, 19, 0.3921568627);
    background-image: url("/assets/noise.webp");
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    isolation: isolate;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: -5
}

.main-page grid {
    padding: 18px
}

@media screen and (max-width: 768px) {
    .main-page grid {
        padding: 8px
    }
}

.fullpage {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 10;
    overflow: hidden
}

.iframepage .page,
.fullpage-injected .page {
    padding: 0px 24px 24px
}

.iframepage .page .side-image,
.fullpage-injected .page .side-image {
    position: relative;
    display: block;
    float: right;
    top: auto;
    right: auto;
    max-width: 50%;
    margin-left: 16px;
    border-radius: 4px 0 0 48px
}

.iframepage .page .page-info,
.fullpage-injected .page .page-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 16px;
    opacity: 0.48 !important
}

.iframepage .page .page-info icon,
.fullpage-injected .page .page-info icon {
    width: 16px;
    height: 16px
}

/* .iframepage .app,.fullpage-injected .app {
    background-image: url("/assets/img/comvehalloweenakira.webp");
    background-size: cover;
    background-position: center
} */

.iframepage bento,
.fullpage-injected bento {
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important
}

.paragraph {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.paragraph p {
    opacity: 0.72
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.flex-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row
}

.scrolled .header {
    padding: 24px 24px 0px
}

@media screen and (max-width: 768px) {
    .scrolled .header {
        padding: 8px 8px 0px
    }
}

.scrolled .header blockinfo {
    transition: all 0.3s ease-in-out;
    gap: 0
}

.scrolled .header blockinfo span {
    width: 0;
    opacity: 0
}

.scrolled .header .menu_button {
    font-size: 0;
    gap: 4px;
    min-width: -moz-fit-content;
    min-width: fit-content
}

.scrolled .header .menu_button hotkey {
    font-size: 15px
}

.scrolled .sidetext {
    transform: translateX(400px) scale(0.5) translateY(-300px) !important;
    opacity: 0 !important
}

.scrolled .sideline {
    transform: translateX(-96px) scale(0.5) translateY(-300px);
    opacity: 0
}

.scrolled .scroll {
    filter: blur(24px);
    opacity: 0
}

.scrolled .app {
    scrollbar-color: rgba(255, 255, 255, 0.08) var(--black-transparent)
}

.background-video {
    display: block
}

.background-video:not([src])+img,
.background-video[error]+img {
    display: block
}

footer {
    background-color: rgba(25, 25, 30, 0.5960784314);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    display: flex;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    transition: transform 0.35s ease-in-out, box-shadow 0.2s ease;
    will-change: transform;
    z-index: 5;
    pointer-events: none;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content
}

footer.visible,
footer.open {
    transform: translateY(0);
    pointer-events: auto;
    z-index: 5
}

footer .container {
    padding: 48px;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    flex-direction: row;
    gap: 48px
}

footer .biglogo {
    height: 100%
}

footer .category {
    display: flex;
    flex-direction: column;
    gap: 16px
}

footer .category .anchors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0.72;
    cursor: pointer
}

footer .edge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    position: absolute;
    right: 64px;
    bottom: 64px
}

footer .edge-text span {
    display: flex;
    flex-direction: row;
    opacity: 0.42;
    justify-content: center;
    align-items: center;
    gap: 6px
}

footer .edge-text .webring {
    display: flex;
    opacity: 0.9;
    cursor: pointer;
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px
}

footer .edge-text .webring a {
    opacity: 0.72;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

footer .edge-text .webring:hover {
    filter: brightness(1.2)
}

@media screen and (max-width: 768px) {
    footer .container {
        padding: 16px;
        gap: 16px;
        padding-bottom: 64px
    }

    footer .biglogo {
        display: none !important
    }

    footer .edge-text {
        right: 24px;
        bottom: 24px
    }
}

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

.footer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.27);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.35s ease;
    opacity: 1
}

.webring-block {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 420px;
    height: 40px;
    padding: 12px 16px;
    z-index: 5
}

.webring-block:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

@media screen and (max-width: 500px) {
    .webring-block {
        width: 85%;
        bottom: 10px
    }
}

.webring-block .anchor {
    cursor: pointer;
    opacity: 1;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: center
}

.webring-block .anchor span {
    opacity: 0.9;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%
}

.webring-block .current {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center
}

.webring-block .current a {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: -moz-min-content;
    height: min-content
}

.webring-block .current a icon {
    opacity: 0.72;
    height: 16px;
    width: 16px
}

.webring-block .current span {
    opacity: 0.72
}

.banners img {
    image-rendering: pixelated;
    transition: all 0.15s ease-in-out;
    transform: none;
    box-shadow: none;
    z-index: 9;
    position: relative
}

.banners img:hover {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.48);
    z-index: 10;
    cursor: pointer
}

@media only screen and (max-width: 500px) {

    body,
    html {
        height: 100%;
        width: 100%;
        overflow-y: auto
    }

    .app {
        height: 100%;
        overflow-y: auto
    }

    .header {
        position: absolute
    }

    .home {
        height: 100%;
        min-height: 100%;
        position: absolute
    }

    .home-propage {
        height: 100%
    }

    .scroll {
        position: absolute
    }
}

@media screen and (max-width: 768px) {
    #realtimeCursorLayer {
        display: none !important
    }

    .visitor-cursor {
        display: none !important
    }

    .header {
        padding: 16px 16px 0
    }

    .header icon {
        transform: scale(0.8) !important
    }

    .header .mobilehide {
        display: none
    }

    .header .mobileshow {
        display: flex
    }

    .header hotkey {
        display: none
    }

    .header .near {
        gap: 4px
    }

    .header .hide {
        display: none
    }

    .home {
        padding: 100px 24px !important
    }

    .home .background-video {
        min-width: 160%
    }

    .home .sidetext {
        max-height: 80%
    }

    .iframepage .page .side-image,
    .fullpage-injected .page .side-image {
        position: static;
        float: none;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        border-radius: 8px
    }
}

@media screen and (max-width: 800px) {
    body {
        padding: 24px
    }
}

@media screen and (max-width: 500px) {
    body {
        padding: 12px
    }
}

grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    max-width: 100%;
    place-items: stretch;
    grid-auto-rows: 155px;
    box-sizing: border-box;
    gap: 10px;
    min-height: -moz-fit-content;
    min-height: fit-content;
    grid-auto-rows: 154px
}

@media screen and (max-height: 1020px) {
    grid {
        grid-auto-rows: 148px
    }
}

@media screen and (max-height: 1020px) and (max-height:960px) {
    grid {
        grid-auto-rows: 140px
    }
}

@media screen and (max-height: 1020px) and (max-height:960px) and (max-height:768px) {
    grid {
        grid-auto-rows: 130px
    }
}

@media screen and (max-width: 1290px) {
    grid {
        grid-template-columns: repeat(6, 1fr)
    }
}

@media screen and (max-width: 1000px) {
    grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (max-width: 500px) {
    grid {
        gap: 6px;
        grid-auto-rows: 140px
    }
}

icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    color: var(--white);
    background-color: currentColor;
    -webkit-mask: url("/assets/svg/broken_image.svg") no-repeat center/contain;
    mask: url("/assets/svg/broken_image.svg") no-repeat center/contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 200ms ease-out
}

icon.px24 {
    width: 24px;
    height: 24px
}

icon.big {
    width: 64px;
    height: 64px
}

@media screen and (max-width: 500px) {
    icon.big {
        width: 48px;
        height: 48px
    }
}

icon.bigger {
    width: 80px;
    height: 80px
}

@media screen and (max-width: 500px) {
    icon.bigger {
        width: 52px;
        height: 52px
    }
}

icon.custom-color {
    color: currentColor;
    background-color: currentColor
}

icon.logo {
    -webkit-mask: none;
    mask: none;
    background-image: url("/assets/img/akira_logo.ico");
    height: 44px;
    width: 60px;
    background-size: contain;
    background-color: rgba(0, 0, 0, 0)
}

icon.scroll_down {
    -webkit-mask: url("/assets/svg/mouse.svg") no-repeat center/contain;
    mask: url("/assets/svg/mouse.svg") no-repeat center/contain
}

@media screen and (max-width: 500px) {
    icon.scroll_down {
        -webkit-mask: url("/assets/svg/swipe_vertical.svg") no-repeat center/contain;
        mask: url("/assets/svg/swipe_vertical.svg") no-repeat center/contain
    }
}

icon.apps {
    -webkit-mask: url("/assets/svg/apps.svg") no-repeat center/contain;
    mask: url("/assets/svg/apps.svg") no-repeat center/contain
}

icon.arrow_outward {
    -webkit-mask: url("/assets/svg/arrow_outward.svg") no-repeat center/contain;
    mask: url("/assets/svg/arrow_outward.svg") no-repeat center/contain
}

icon.auto_stories {
    -webkit-mask: url("/assets/svg/auto_stories.svg") no-repeat center/contain;
    mask: url("/assets/svg/auto_stories.svg") no-repeat center/contain
}

icon.burger {
    -webkit-mask: url("/assets/svg/burger.svg") no-repeat center/contain;
    mask: url("/assets/svg/burger.svg") no-repeat center/contain
}

icon.call {
    -webkit-mask: url("/assets/svg/call.svg") no-repeat center/contain;
    mask: url("/assets/svg/call.svg") no-repeat center/contain
}

icon.check {
    -webkit-mask: url("/assets/svg/check.svg") no-repeat center/contain;
    mask: url("/assets/svg/check.svg") no-repeat center/contain
}

icon.clear_day {
    -webkit-mask: url("/assets/svg/clear_day.svg") no-repeat center/contain;
    mask: url("/assets/svg/clear_day.svg") no-repeat center/contain
}

icon.clock {
    -webkit-mask: url("/assets/svg/clock.svg") no-repeat center/contain;
    mask: url("/assets/svg/clock.svg") no-repeat center/contain
}

icon.command {
    -webkit-mask: url("/assets/svg/command.svg") no-repeat center/contain;
    mask: url("/assets/svg/command.svg") no-repeat center/contain
}

icon.discord {
    -webkit-mask: url("/assets/svg/discord.svg") no-repeat center/contain;
    mask: url("/assets/svg/discord.svg") no-repeat center/contain
}

icon.drag {
    -webkit-mask: url("/assets/svg/drag.svg") no-repeat center/contain;
    mask: url("/assets/svg/drag.svg") no-repeat center/contain
}

icon.dropdown {
    -webkit-mask: url("/assets/svg/dropdown.svg") no-repeat center/contain;
    mask: url("/assets/svg/dropdown.svg") no-repeat center/contain
}

icon.fiber_manual_record {
    -webkit-mask: url("/assets/svg/fiber_manual_record.svg") no-repeat center/contain;
    mask: url("/assets/svg/fiber_manual_record.svg") no-repeat center/contain
}

icon.filled-circle {
    -webkit-mask: url("/assets/svg/filled-circle.svg") no-repeat center/contain;
    mask: url("/assets/svg/filled-circle.svg") no-repeat center/contain
}

icon.github {
    -webkit-mask: url("/assets/svg/github.svg") no-repeat center/contain;
    mask: url("/assets/svg/github.svg") no-repeat center/contain
}

icon.g_translate {
    -webkit-mask: url("/assets/svg/g_translate.svg") no-repeat center/contain;
    mask: url("/assets/svg/g_translate.svg") no-repeat center/contain
}

icon.hard_drive {
    -webkit-mask: url("/assets/svg/hard_drive.svg") no-repeat center/contain;
    mask: url("/assets/svg/hard_drive.svg") no-repeat center/contain
}

icon.headphones {
    -webkit-mask: url("/assets/svg/headphones.svg") no-repeat center/contain;
    mask: url("/assets/svg/headphones.svg") no-repeat center/contain
}

icon.info_circle {
    -webkit-mask: url("/assets/svg/info_circle.svg") no-repeat center/contain;
    mask: url("/assets/svg/info_circle.svg") no-repeat center/contain
}

icon.keyboard_arrow_left {
    -webkit-mask: url("/assets/svg/keyboard_arrow_left.svg") no-repeat center/contain;
    mask: url("/assets/svg/keyboard_arrow_left.svg") no-repeat center/contain
}

icon.keyboard_arrow_right {
    -webkit-mask: url("/assets/svg/keyboard_arrow_right.svg") no-repeat center/contain;
    mask: url("/assets/svg/keyboard_arrow_right.svg") no-repeat center/contain
}

icon.link {
    -webkit-mask: url("/assets/svg/link.svg") no-repeat center/contain;
    mask: url("/assets/svg/link.svg") no-repeat center/contain
}

icon.moon {
    -webkit-mask: url("/assets/svg/moon.svg") no-repeat center/contain;
    mask: url("/assets/svg/moon.svg") no-repeat center/contain
}

icon.pause {
    -webkit-mask: url("/assets/svg/pause.svg") no-repeat center/contain;
    mask: url("/assets/svg/pause.svg") no-repeat center/contain
}

icon.queue_music {
    -webkit-mask: url("/assets/svg/queue_music.svg") no-repeat center/contain;
    mask: url("/assets/svg/queue_music.svg") no-repeat center/contain
}

icon.replay {
    -webkit-mask: url("/assets/svg/replay.svg") no-repeat center/contain;
    mask: url("/assets/svg/replay.svg") no-repeat center/contain
}

icon.resume {
    -webkit-mask: url("/assets/svg/resume.svg") no-repeat center/contain;
    mask: url("/assets/svg/resume.svg") no-repeat center/contain
}

icon.search {
    -webkit-mask: url("/assets/svg/search.svg") no-repeat center/contain;
    mask: url("/assets/svg/search.svg") no-repeat center/contain
}

icon.leaderboard {
    -webkit-mask: url("/assets/svg/leaderboard.svg") no-repeat center/contain;
    mask: url("/assets/svg/leaderboard.svg") no-repeat center/contain
}

icon.cup-first {
    -webkit-mask: url("/assets/svg/cup-first-donate.svg") no-repeat center/contain;
    mask: url("/assets/svg/cup-first-donate.svg") no-repeat center/contain
}

icon.medal-second {
    -webkit-mask: url("/assets/svg/2nd-place-medal.svg") no-repeat center/contain;
    mask: url("/assets/svg/2nd-place-medal.svg") no-repeat center/contain
}

icon.medal-third {
    -webkit-mask: url("/assets/svg/3rd-place-medal.svg") no-repeat center/contain;
    mask: url("/assets/svg/3rd-place-medal.svg") no-repeat center/contain
}

icon.select_window_2 {
    -webkit-mask: url("/assets/svg/select_window_2.svg") no-repeat center/contain;
    mask: url("/assets/svg/select_window_2.svg") no-repeat center/contain
}

icon.star {
    -webkit-mask: url("/assets/svg/star.svg") no-repeat center/contain;
    mask: url("/assets/svg/star.svg") no-repeat center/contain
}

icon.facebook {
    -webkit-mask: url("/assets/svg/facebook.svg") no-repeat center/contain;
    mask: url("/assets/svg/facebook.svg") no-repeat center/contain
}

icon.thunderstorm {
    -webkit-mask: url("/assets/svg/thunderstorm.svg") no-repeat center/contain;
    mask: url("/assets/svg/thunderstorm.svg") no-repeat center/contain
}

icon.thunderstorm {
    -webkit-mask: url("/assets/svg/thunderstorm.svg") no-repeat center/contain;
    mask: url("/assets/svg/thunderstorm.svg") no-repeat center/contain
}


icon.wakatime {
    -webkit-mask: url("/assets/svg/wakatime.svg") no-repeat center/contain;
    mask: url("/assets/svg/wakatime.svg") no-repeat center/contain
}

icon.x-twitter {
    -webkit-mask: url("/assets/svg/x(twitter).svg") no-repeat center/contain;
    mask: url("/assets/svg/x(twitter).svg") no-repeat center/contain
}

icon.youtube {
    -webkit-mask: url("/assets/svg/youtube.svg") no-repeat center/contain;
    mask: url("/assets/svg/youtube.svg") no-repeat center/contain
}

icon.youtube_music {
    -webkit-mask: url("/assets/svg/youtube_music.svg") no-repeat center/contain;
    mask: url("/assets/svg/youtube_music.svg") no-repeat center/contain
}

icon.partly_cloudy_day {
    -webkit-mask: url("/assets/svg/partly_cloudy_day.svg") no-repeat center/contain;
    mask: url("/assets/svg/partly_cloudy_day.svg") no-repeat center/contain
}

icon.partly_cloudy_night {
    -webkit-mask: url("/assets/svg/partly_cloudy_night.svg") no-repeat center/contain;
    mask: url("/assets/svg/partly_cloudy_night.svg") no-repeat center/contain
}

icon.fog {
    -webkit-mask: url("/assets/svg/fog.svg") no-repeat center/contain;
    mask: url("/assets/svg/fog.svg") no-repeat center/contain
}

icon.rain {
    -webkit-mask: url("/assets/svg/rain.svg") no-repeat center/contain;
    mask: url("/assets/svg/rain.svg") no-repeat center/contain
}

icon.snow {
    -webkit-mask: url("/assets/svg/snow.svg") no-repeat center/contain;
    mask: url("/assets/svg/snow.svg") no-repeat center/contain
}

icon.visibility {
    -webkit-mask: url("/assets/svg/visibility.svg") no-repeat center/contain;
    mask: url("/assets/svg/visibility.svg") no-repeat center/contain
}

icon.calendar_add_on {
    -webkit-mask: url("/assets/svg/calendar_add_on.svg") no-repeat center/contain;
    mask: url("/assets/svg/calendar_add_on.svg") no-repeat center/contain
}

icon.delete {
    -webkit-mask: url("/assets/svg/delete.svg") no-repeat center/contain;
    mask: url("/assets/svg/delete.svg") no-repeat center/contain
}

icon.star_yellow {
    -webkit-mask: url("/assets/svg/star_yellow.svg") no-repeat center/contain;
    mask: url("/assets/svg/star_yellow.svg") no-repeat center/contain
}

icon.arrow_downward {
    -webkit-mask: url("/assets/svg/arrow_downward.svg") no-repeat center/contain;
    mask: url("/assets/svg/arrow_downward.svg") no-repeat center/contain
}

icon.undo {
    -webkit-mask: url("/assets/svg/undo.svg") no-repeat center/contain;
    mask: url("/assets/svg/undo.svg") no-repeat center/contain
}

icon.live_tv {
    -webkit-mask: url("/assets/svg/live_tv.svg") no-repeat center/contain;
    mask: url("/assets/svg/live_tv.svg") no-repeat center/contain
}

icon.music_note {
    -webkit-mask: url("/assets/svg/music_note.svg") no-repeat center/contain;
    mask: url("/assets/svg/music_note.svg") no-repeat center/contain
}

icon.mode_standby {
    -webkit-mask: url("/assets/svg/mode_standby.svg") no-repeat center/contain;
    mask: url("/assets/svg/mode_standby.svg") no-repeat center/contain
}

icon.mobile {
    -webkit-mask: url("/assets/svg/mobile.svg") no-repeat center/contain;
    mask: url("/assets/svg/mobile.svg") no-repeat center/contain
}

icon.timer {
    -webkit-mask: url("/assets/svg/timer.svg") no-repeat center/contain;
    mask: url("/assets/svg/timer.svg") no-repeat center/contain
}

icon.keyboard {
    -webkit-mask: url("/assets/svg/keyboard.svg") no-repeat center/contain;
    mask: url("/assets/svg/keyboard.svg") no-repeat center/contain
}

icon.stylus_fountain_pen {
    -webkit-mask: url("/assets/svg/stylus_fountain_pen.svg") no-repeat center/contain;
    mask: url("/assets/svg/stylus_fountain_pen.svg") no-repeat center/contain
}

icon.hide_source {
    -webkit-mask: url("/assets/svg/hide_source.svg") no-repeat center/contain;
    mask: url("/assets/svg/hide_source.svg") no-repeat center/contain
}

icon.chain {
    -webkit-mask: url("/assets/svg/chain.svg") no-repeat center/contain;
    mask: url("/assets/svg/chain.svg") no-repeat center/contain
}

icon.acute {
    -webkit-mask: url("/assets/svg/acute.svg") no-repeat center/contain;
    mask: url("/assets/svg/acute.svg") no-repeat center/contain
}

icon.steam {
    -webkit-mask: url("/assets/svg/steam.svg") no-repeat center/contain;
    mask: url("/assets/svg/steam.svg") no-repeat center/contain
}

icon.translate {
    -webkit-mask: url("/assets/svg/translate.svg") no-repeat center/contain;
    mask: url("/assets/svg/translate.svg") no-repeat center/contain
}

icon.favorite {
    -webkit-mask: url("/assets/svg/favorite.svg") no-repeat center/contain;
    mask: url("/assets/svg/favorite.svg") no-repeat center/contain
}

icon.code {
    -webkit-mask: url("/assets/svg/code.svg") no-repeat center/contain;
    mask: url("/assets/svg/code.svg") no-repeat center/contain
}

icon.swipe_vertical {
    -webkit-mask: url("/assets/svg/swipe_vertical.svg") no-repeat center/contain;
    mask: url("/assets/svg/swipe_vertical.svg") no-repeat center/contain
}

icon.close {
    -webkit-mask: url("/assets/svg/close.svg") no-repeat center/contain;
    mask: url("/assets/svg/close.svg") no-repeat center/contain
}

icon.chat {
    -webkit-mask: url("/assets/svg/chat.svg") no-repeat center/contain;
    mask: url("/assets/svg/chat.svg") no-repeat center/contain
}

icon.tag {
    -webkit-mask: url("/assets/svg/tag.svg") no-repeat center/contain;
    mask: url("/assets/svg/tag.svg") no-repeat center/contain
}

icon.bank {
    -webkit-mask: url("/assets/svg/bank.svg") no-repeat center/contain;
    mask: url("/assets/svg/bank.svg") no-repeat center/contain
}

icon.alternate_email {
    -webkit-mask: url("/assets/svg/alternate_email.svg") no-repeat center/contain;
    mask: url("/assets/svg/alternate_email.svg") no-repeat center/contain
}

icon.account_circle {
    -webkit-mask: url("/assets/svg/account_circle.svg") no-repeat center/contain;
    mask: url("/assets/svg/account_circle.svg") no-repeat center/contain
}

icon.page_menu_ios {
    -webkit-mask: url("/assets/svg/page_menu_ios.svg") no-repeat center/contain;
    mask: url("/assets/svg/page_menu_ios.svg") no-repeat center/contain
}

icon.ctrl {
    -webkit-mask: url("/assets/svg/ctrl.svg") no-repeat center/contain;
    mask: url("/assets/svg/ctrl.svg") no-repeat center/contain
}

icon.cottage {
    -webkit-mask: url("/assets/svg/cottage.svg") no-repeat center/contain;
    mask: url("/assets/svg/cottage.svg") no-repeat center/contain
}

icon.send {
    -webkit-mask: url("/assets/svg/send.svg") no-repeat center/contain;
    mask: url("/assets/svg/send.svg") no-repeat center/contain
}

icon.cloud {
    -webkit-mask: url("/assets/svg/cloud.svg") no-repeat center/contain;
    mask: url("/assets/svg/cloud.svg") no-repeat center/contain
}

icon.coffee {
    -webkit-mask: url("/assets/svg/coffee.svg") no-repeat center/contain;
    mask: url("/assets/svg/coffee.svg") no-repeat center/contain
}

icon.bubble_chart {
    -webkit-mask: url("/assets/svg/bubble_chart.svg") no-repeat center/contain;
    mask: url("/assets/svg/bubble_chart.svg") no-repeat center/contain
}

icon.help {
    -webkit-mask: url("/assets/svg/help.svg") no-repeat center/contain;
    mask: url("/assets/svg/help.svg") no-repeat center/contain
}

icon.broken_image {
    -webkit-mask: url("/assets/svg/broken_image.svg") no-repeat center/contain;
    mask: url("/assets/svg/broken_image.svg") no-repeat center/contain
}

icon.content_paste {
    -webkit-mask: url("/assets/svg/content_paste.svg") no-repeat center/contain;
    mask: url("/assets/svg/content_paste.svg") no-repeat center/contain
}

icon.content_copy {
    -webkit-mask: url("/assets/svg/content_copy.svg") no-repeat center/contain;
    mask: url("/assets/svg/content_copy.svg") no-repeat center/contain
}

icon.keyboard_double_arrow_right {
    -webkit-mask: url("/assets/svg/keyboard_double_arrow_right.svg") no-repeat center/contain;
    mask: url("/assets/svg/keyboard_double_arrow_right.svg") no-repeat center/contain
}

icon.keyboard_double_arrow_left {
    -webkit-mask: url("/assets/svg/keyboard_double_arrow_left.svg") no-repeat center/contain;
    mask: url("/assets/svg/keyboard_double_arrow_left.svg") no-repeat center/contain
}

icon.captive_portal {
    -webkit-mask: url("/assets/svg/captive_portal.svg") no-repeat center/contain;
    mask: url("/assets/svg/captive_portal.svg") no-repeat center/contain
}

icon.all_inclusive {
    -webkit-mask: url("/assets/svg/all_inclusive.svg") no-repeat center/contain;
    mask: url("/assets/svg/all_inclusive.svg") no-repeat center/contain
}

icon.arrow_left_alt {
    -webkit-mask: url("/assets/svg/arrow_left_alt.svg") no-repeat center/contain;
    mask: url("/assets/svg/arrow_left_alt.svg") no-repeat center/contain
}

icon.arrow_right_alt {
    -webkit-mask: url("/assets/svg/arrow_right_alt.svg") no-repeat center/contain;
    mask: url("/assets/svg/arrow_right_alt.svg") no-repeat center/contain
}

icon.wb_sunny {
    -webkit-mask: url("/assets/svg/wb_sunny.svg") no-repeat center/contain;
    mask: url("/assets/svg/wb_sunny.svg") no-repeat center/contain
}

icon.mouse {
    -webkit-mask: url("/assets/svg/mouse.svg") no-repeat center/contain;
    mask: url("/assets/svg/mouse.svg") no-repeat center/contain
}

icon.globe {
    -webkit-mask: url("/assets/svg/globe.svg") no-repeat center/contain;
    mask: url("/assets/svg/globe.svg") no-repeat center/contain
}

icon.widget {
    -webkit-mask: url("/assets/svg/widget.svg") no-repeat center/contain;
    mask: url("/assets/svg/widget.svg") no-repeat center/contain
}

icon.server {
    -webkit-mask: url("/assets/svg/server.svg") no-repeat center/contain;
    mask: url("/assets/svg/server.svg") no-repeat center/contain
}

icon.heart {
    -webkit-mask: url("/assets/svg/heart.svg") no-repeat center/contain;
    mask: url("/assets/svg/heart.svg") no-repeat center/contain
}

icon.cursor {
    -webkit-mask: url("/assets/svg/cursor.svg") no-repeat center/contain;
    mask: url("/assets/svg/cursor.svg") no-repeat center/contain
}

icon.circle {
    -webkit-mask: url("/assets/svg/circle.svg") no-repeat center/contain;
    mask: url("/assets/svg/circle.svg") no-repeat center/contain
}

icon.cat {
    -webkit-mask: url("/assets/svg/cat.svg") no-repeat center/contain;
    mask: url("/assets/svg/cat.svg") no-repeat center/contain
}

icon.nowifi {
    -webkit-mask: url("/assets/svg/nowifi.svg") no-repeat center/contain;
    mask: url("/assets/svg/nowifi.svg") no-repeat center/contain
}

icon.lock {
    -webkit-mask: url("/assets/svg/lock.svg") no-repeat center/contain;
    mask: url("/assets/svg/lock.svg") no-repeat center/contain
}

icon.copy {
    -webkit-mask: url("/assets/svg/copy.svg") no-repeat center/contain;
    mask: url("/assets/svg/copy.svg") no-repeat center/contain
}

icon.download {
    -webkit-mask: url("/assets/svg/download.svg") no-repeat center/contain;
    mask: url("/assets/svg/download.svg") no-repeat center/contain
}

icon.ghost {
    -webkit-mask: url("/assets/svg/ghost.svg") no-repeat center/contain;
    mask: url("/assets/svg/ghost.svg") no-repeat center/contain
}

icon.closed_eye {
    -webkit-mask: url("/assets/svg/closed_eye.svg") no-repeat center/contain;
    mask: url("/assets/svg/closed_eye.svg") no-repeat center/contain
}

icon.eye {
    -webkit-mask: url("/assets/svg/eye.svg") no-repeat center/contain;
    mask: url("/assets/svg/eye.svg") no-repeat center/contain
}

icon.threedot_circle {
    -webkit-mask: url("/assets/svg/threedot_circle.svg") no-repeat center/contain;
    mask: url("/assets/svg/threedot_circle.svg") no-repeat center/contain
}

icon.compass {
    -webkit-mask: url("/assets/svg/compass.svg") no-repeat center/contain;
    mask: url("/assets/svg/compass.svg") no-repeat center/contain
}

icon-button {
    height: 44px;
    width: 44px;
    aspect-ratio: 1/1;
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    transition: all 0.15s ease
}

icon-button:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

icon-button::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

icon-button:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

icon-button.bento-link {
    position: absolute;
    z-index: 1;
    bottom: 12px;
    left: 12px;
    background-color: rgba(25, 25, 30, 0) !important
}

icon-button:active {
    transform: scale(0.95)
}

icon-button:hover icon {
    transform: scale(1.2) rotate(7deg)
}

hotkey {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    background-color: var(--ui-slight);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 30px;
    min-width: 54px;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--white)
}

hotkey:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

hotkey icon {
    height: 20px !important;
    width: 20px !important
}

hotkey:hover icon {
    transform: scale(0.92)
}

button {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    height: var(--ui-height);
    min-width: 120px;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    padding: 0 12px;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0);
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    transition: background-color 0.3s ease-in-out, transform 0.15s ease-in-out, opacity 0.15s ease-in-out
}

button:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

button::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

button:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

button:focus-within {
    outline: 1.25px solid var(--ui);
    outline-offset: 2px
}

button:hover {
    background-color: var(--ui-slight)
}

button:active {
    transform: scale(0.97)
}

button:disabled {
    opacity: 0.5
}

button icon {
    width: 22px;
    height: 22px
}

inputbox {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    min-width: 220px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    border-radius: var(--ui-rounding);
    height: var(--ui-height);
    cursor: text;
    transition: transform 0.15s ease-in-out, background-color 0.3s ease-in-out
}

inputbox:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

inputbox::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

inputbox:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

inputbox icon {
    opacity: 0.72
}

inputbox:focus-within {
    outline: 1.25px solid var(--ui);
    outline-offset: 2px
}

inputbox input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    flex: 1;
    font-family: var(--font-family);
    font-size: 15px
}

inputbox input::-moz-placeholder {
    color: var(--white);
    opacity: 0.6
}

inputbox input::placeholder {
    color: var(--white);
    opacity: 0.6
}

inputbox textarea {
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    flex: 1;
    font-family: var(--font-family);
    font-size: 15px;
    resize: none;
    overflow: hidden;
    max-height: 160px
}

inputbox textarea::-moz-placeholder {
    color: var(--white);
    opacity: 0.6
}

inputbox textarea::placeholder {
    color: var(--white);
    opacity: 0.6
}

inputbox:hover {
    transform: scale(1)
}

inputbox.resizeable {
    align-items: flex-start;
    height: auto;
    min-height: var(--ui-height);
    padding: 12px
}

inputbox.resizeable textarea {
    resize: both;
    min-height: 24px;
    overflow: auto;
    line-height: 1.4
}

inputbox.resizeable:hover {
    transform: none
}

toggle {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    width: 60px;
    height: 30px;
    border-radius: var(--ui-rounding);
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease-in-out
}

toggle:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

toggle:focus-within {
    outline: 1.25px solid var(--ui);
    outline-offset: 2px
}

toggle .toggle-slider {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--white);
    border-radius: 50%;
    left: 6px;
    transition: all 0.3s ease-in-out;
    opacity: 0.8
}

toggle .toggle-label-off,
toggle .toggle-label-on {
    position: absolute;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    opacity: 0.8;
    transition: all 0.3s ease-in-out
}

toggle .toggle-label-off {
    right: 10px
}

toggle .toggle-label-on {
    left: 10px;
    opacity: 0
}

toggle.active .toggle-slider {
    left: 35px
}

toggle.active .toggle-label-off {
    opacity: 0
}

toggle.active .toggle-label-on {
    opacity: 0.8
}

toggle:hover .toggle-slider {
    opacity: 1
}

blockinfo {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    padding: 0 12px;
    border-radius: var(--ui-rounding);
    height: var(--ui-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    text-overflow: ellipsis;
    max-width: 240px;
    gap: 8px;
    color: rgba(243, 244, 245, 0.72)
}

blockinfo:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

blockinfo span {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: width 0.3s ease-out, opacity 0.3s ease-in-out;
    width: 110px;
    opacity: 1;
    text-align: center;
    height: -moz-fit-content;
    height: fit-content;
    display: inline-block
}

blockinfo svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
    opacity: 1
}

blockinfo>* {
    margin: 0
}

blockinfo:hover icon {
    transform: rotate(-7deg) scale(1.2)
}

info {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    max-width: 400px;
    border-radius: var(--ui-rounding);
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    color: var(--white);
    box-sizing: border-box
}

info:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

info .container {
    padding: 16px 18px 0px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box
}

info .container.small {
    padding: 10px 12px 4px
}

info .title {
    min-width: 220px;
    opacity: 1;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    width: -moz-max-content;
    width: max-content
}

info .title icon {
    opacity: 0.72
}

info .description {
    flex: 1;
    opacity: 0.9;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
    align-items: center;
    font-size: 14px
}

#global-tooltip[data-tooltip-key=activities] .container .description,
#global-tooltip[data-tooltip-key=activities] media .track .title,
#global-tooltip[data-tooltip-key=activities] media .track .artist,
#global-tooltip[data-tooltip-key=activities] .items .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    white-space: normal
}

#global-tooltip[data-tooltip-key=activities] .container .description {
    -webkit-line-clamp: 2;
    line-clamp: 2
}

#global-tooltip[data-tooltip-key=activities] media .track .title {
    -webkit-line-clamp: 1;
    line-clamp: 1
}

#global-tooltip[data-tooltip-key=activities] media .track .artist,
#global-tooltip[data-tooltip-key=activities] .items .description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word
}

.tooltip-icon-wrapper {
    height: 20px;
    width: 20px;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center
}

.tooltip-icon-wrapper:not(:where(:root)) {
    display: inline-block;
    text-align: center;
    line-height: 20px;
    vertical-align: middle
}

media {
    min-width: 200px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

media .info {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    width: 100%
}

media img {
    width: 48px;
    border-radius: 4px;
    flex-shrink: 0
}

media .track {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1
}

media .track .title {
    width: 100%;
    opacity: 0.72
}

media .track .artist {
    opacity: 0.48
}

media .playback {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--white);
    opacity: 0.72;
    white-space: nowrap;
    color: rgba(243, 244, 245, 0.48)
}

media .playback .progress {
    width: 100%;
    height: 2px
}

item {
    display: flex;
    height: 50px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--ui-stroke);
    transition: background-color 0.3s ease-in-out, transform 0.15s ease-in-out, border-color 0.2s ease-in-out
}

item icon {
    opacity: 0.72
}

item .item {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    width: 100%
}

item .item .description {
    opacity: 0.72
}

item:hover,
item:focus {
    background-color: var(--ui-slight);
    filter: brightness(1.25)
}

item:active {
    filter: brightness(1.25)
}

item.selected {
    background-color: var(--ui-slight);
    border-left: 3px solid rgba(255, 255, 255, 0.6);
    padding-left: 15px;
    transform: translateX(2px)
}

item.selected .item .description {
    opacity: 0.9
}

item.selected icon {
    opacity: 1
}

item.selected hotkey {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2)
}

selector {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    min-width: 120px;
    max-height: 400px;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
    border-radius: var(--ui-rounding);
    overflow: hidden;
    outline: none
}

selector:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

selector:focus {
    outline: 1.25px solid var(--ui);
    outline-offset: 2px
}

selector inputbox {
    background-color: var(--ui-slight)
}

selector .container {
    padding: 16px 8px 2px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box
}

selector .container .info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 12px;
    color: rgba(243, 244, 245, 0.72)
}

selector .container .info .title {
    display: flex;
    flex-direction: row;
    gap: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

selector .container .info .title svg {
    opacity: 0.72
}

selector .summary {
    padding: 12px 10px 6px;
    opacity: 0.72;
    flex-shrink: 0
}

selector .selector-items {
    max-height: 234px;
    overflow-y: auto;
    width: 100%
}

selector .selector-items.is-scrollable.at-start:not(.at-end) {
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%)
}

selector .selector-items.is-scrollable.at-end:not(.at-start) {
    mask-image: linear-gradient(to top, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 85%, transparent 100%)
}

selector .selector-items.is-scrollable:not(.at-start):not(.at-end) {
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%)
}

selector .selector-items>*:last-child {
    border-bottom: none
}

action {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
    border-radius: var(--ui-rounding);
    overflow: hidden;
    outline: none
}

action:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

action:focus {
    outline: 1.25px solid var(--ui);
    outline-offset: 2px
}

action inputbox {
    background-color: var(--ui-slight);
    box-sizing: border-box;
    min-width: auto
}

action .container {
    width: 100%;
    padding: 8px 4px 2px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0
}

action .container .info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 12px;
    color: rgba(243, 244, 245, 0.72)
}

action .container .info .title {
    display: flex;
    flex-direction: row;
    gap: 8px
}

action .container .info .title svg {
    opacity: 0.72
}

action .summary {
    padding: 12px 18px 6px;
    opacity: 0.72;
    flex-shrink: 0
}

action .action-items {
    max-height: 50vh;
    overflow-y: auto;
    width: 100%
}

action .action-items>*:last-child {
    border-bottom: none
}

items {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

items item {
    opacity: 0;
    transform: translateY(10px);
    animation: itemFadeIn 0.3s ease-out forwards
}

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

items:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1
}

items::-webkit-scrollbar {
    width: 6px
}

items::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0
}

items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out
}

items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18)
}

progress-bar {
    height: 2px;
    width: 100%;
    transition: background 0.3s ease-in-out
}

.ui-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    box-sizing: border-box;
    align-items: center;
    transition: all 0.2s ease
}

.ui-item .big {
    height: 100% !important;
    box-sizing: border-box;
    aspect-ratio: 1/1 !important
}

.ui-item .first {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    object-fit: cover;
}

@media screen and (max-width: 500px) {
    .ui-item .first {
        width: 48px;
        height: 48px;
    }
}

.ui-item .firstimg {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: 50%;
}

.ui-item .firstimg:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.ui-item .info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 0;
    opacity: 0.72
}

.ui-item .info .description {
    opacity: 0.48;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ui-item .info>span,
.ui-item .info>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ui-item .last {
    height: 24px;
    width: 24px
}

.ui-item:hover {
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out
}

.ui-item:hover::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

.ui-item:hover:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

.activity {
    width: 100%;
    min-width: 320px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    min-width: 290px;
    flex-direction: row;
    gap: 10px;
    padding-bottom: 3.5%;
    align-items: center
}

.activity .first {
    height: 90% !important
}

.activity .firstimg {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding)
}

.activity .firstimg:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.activity .info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    opacity: 0.9
}

.activity .info .description {
    opacity: 0.72;
    width: 100%;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    padding-right: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center
}

.activity .info .description:first-child {
    opacity: 0.9;
    font-weight: 500
}

.activity .info>span,
.activity .info>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ui-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain
}

.ui-items.is-scrollable.at-start:not(.at-end) {
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%)
}

.ui-items.is-scrollable.at-end:not(.at-start) {
    mask-image: linear-gradient(to top, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 85%, transparent 100%)
}

.ui-items.is-scrollable:not(.at-start):not(.at-end) {
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%)
}

.ui-items.horizontal {
    flex-direction: row;
    gap: 24px;
    padding-bottom: 0;
    padding-right: 0;
    overflow-y: hidden;
    overflow-x: auto;
    overscroll-behavior: auto
}

.ui-items.horizontal.is-scrollable.at-start:not(.at-end) {
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%)
}

.ui-items.horizontal.is-scrollable.at-end:not(.at-start) {
    mask-image: linear-gradient(to left, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%)
}

.ui-items.horizontal.is-scrollable:not(.at-start):not(.at-end) {
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)
}

.ui-items.horizontal::-webkit-scrollbar {
    height: 2px;
    width: auto
}

.ui-items.horizontal::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 4px
}

.ui-items:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1
}

.ui-items::-webkit-scrollbar {
    width: 6px
}

.ui-items::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0
}

.ui-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out
}

.ui-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18)
}

#global-tooltip {
    z-index: 9999 !important;
    transition: opacity 0.3s ease-in-out !important;
    font-size: 13px;
    gap: 6px
}

#global-tooltip .ui-item {
    padding: 0 12px
}

#global-tooltip[style*="pointer-events: auto"] .ui-item {
    cursor: pointer
}

#global-tooltip[style*="pointer-events: auto"] .ui-item:hover {
    background-color: var(--ui-slight);
    transform: scale(1.02)
}

#global-tooltip[style*="opacity: 1"] {
    pointer-events: auto
}

#global-tooltip icon {
    padding-left: 8px;
    opacity: 0.42;
    transform: scale(0.8)
}

[data-tooltip] {
    position: relative
}

[data-tooltip]:hover {
    cursor: help
}

form {
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px
}

form:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

popup {
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    transition: all 0.2s ease-in-out;
    transition-property: all !important;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.5647058824);
    width: 450px;
    max-width: 90%;
    padding: 12px 16px;
    height: -moz-fit-content;
    height: fit-content;
    box-sizing: border-box
}

popup:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

popup:hover {
    background-color: rgba(243, 244, 245, 0.15)
}

popup.success {
    background-color: rgba(0, 255, 0, 0.2)
}

popup.warning {
    background-color: rgba(255, 0, 51, 0.0156862745)
}

popup.error {
    background-color: rgba(255, 0, 51, 0.2117647059)
}

popup .popup-close {
    cursor: pointer !important
}

popup icon {
    height: 20px;
    width: 20px;
    opacity: 0.72
}

popup span {
    text-align: start;
    opacity: 0.9;
    width: 100%;
    box-sizing: border-box;
    padding-right: 22px
}

bento {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    position: relative;
    border-radius: var(--ui-rounding);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.0705882353);
    transition: all 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden
}

bento:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

bento p {
    opacity: 0.72
}

bento .paragraph {
    display: flex;
    flex-direction: column;
    gap: 8px
}

bento .wrapped-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px
}

bento .wrapped-items .tag {
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    padding: 6px 12px;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(243, 244, 245, 0.0705882353);
    border: none !important;
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    align-items: center
}

bento .wrapped-items .tag:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

bento .wrapped-items .tag icon {
    opacity: 0.72;
    height: 18px;
    width: 18px
}

@media screen and (max-width: 920px) {
    bento .wrapped-items .tag {
        padding: 5px 11px;
        font-size: 14px
    }

    bento .wrapped-items .tag icon {
        height: 16px;
        width: 16px
    }
}

@media screen and (max-width: 920px) and (max-width:768px) {
    bento .wrapped-items .tag {
        padding: 4px 10px;
        font-size: 11px
    }

    bento .wrapped-items .tag icon {
        height: 14px;
        width: 14px
    }
}

bento .bento-background-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit
}

bento .bento-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border-radius: inherit
}

bento .bento-background.current {
    opacity: 1;
    z-index: 2
}

bento .bento-background.next {
    opacity: 0;
    z-index: 1
}

bento .bento-background.prev {
    opacity: 0;
    z-index: 1
}

bento .title,
bento .page,
bento .paragraph,
bento .bento-navigation,
bento .bento-progress {
    position: relative;
    z-index: 3
}

bento .page {
    padding: 16px;
    height: 100%
}

bento .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

bento .title icon {
    opacity: 0.72
}

bento .title span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--white)
}

bento .title .subtitle {
    opacity: 0.24;
    text-align: right;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-block;
    max-width: 40%;
    flex-shrink: 0
}

bento .page {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out
}

bento .page.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 1
}

bento .page.fade-out {
    opacity: 0
}

bento .page.fade-in {
    opacity: 1
}

bento .bento-navigation {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    opacity: 0.72;
    z-index: 10
}

bento .bento-navigation .nav-arrow {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out
}

bento .bento-navigation .nav-arrow:hover {
    opacity: 1
}

bento .bento-navigation .progress-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    opacity: 0.72;
    margin: 0 8px 0 6px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap
}

bento .progress-control {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    position: relative;
    cursor: pointer
}

bento .progress-control .progress-svg {
    width: 20px;
    height: 20px;
    display: block
}

bento .progress-control .progress-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 2
}

bento .progress-control .progress-stroke {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.1s linear
}

bento .progress-control .progress-icon {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--white);
    opacity: 0;
    transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
    pointer-events: none;
    transform: scale(0.9)
}

bento .progress-control:hover .progress-icon,
bento .progress-control .progress-icon.visible {
    opacity: 0.9;
    transform: scale(1)
}

@media screen and (max-width: 500px) {
    bento .progress-control {
        width: 18px;
        height: 18px;
        margin-right: 6px
    }
}

bento .progress-stroke.no-transition {
    transition: none !important
}

bento .bento-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10
}

bento .bento-progress .progress-fill {
    height: 100%;
    width: 0%;
    background-color: rgba(255, 255, 255, 0.4);
    transition: width 0.1s linear
}

bento .bento-progress .progress-fill.no-transition {
    transition: none
}

bento:hover {
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
    border-radius: 12px
}

bento:hover::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

bento:hover:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

bento media {
    padding: 0px
}

bento .background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0.24;
    z-index: -1
}

bento .center {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px
}

bento .center span {
    opacity: 0.72
}

bento .bottom {
    height: 100%;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    gap: 4px
}

bento .bottom span {
    opacity: 0.72
}

bento .days {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    overflow: visible;
    opacity: 1
}

bento .days div {
    height: 36px;
    width: 4px;
    border-radius: 4px;
    background-color: white;
    transition: all 0.2s ease-in-out
}

bento .days div:hover {
    filter: brightness(1.2);
    transform: scale(1.1)
}

bento .pad {
    padding: 16px;
    height: 100%;
    box-sizing: border-box
}

bento.pad {
    padding: 16px
}

bento.big .page {
    padding: 48px
}

@media screen and (max-width: 1400px) {
    bento.big .page {
        padding: 24px
    }
}

@media screen and (max-width: 500px) {
    bento.big .page {
        padding: 16px
    }
}

bento.telegram {
    background-color: rgba(38, 165, 228, 0.1411764706)
}

bento.contacts {
    background-color: rgba(38, 165, 228, 0.1411764706)
}

bento.discord {
    background-color: rgba(88, 101, 243, 0.1411764706)
}

bento.socials .ui-item,
bento.playlists .ui-item,
bento.shikimori .ui-item {
    cursor: pointer
}

bento .two-columns {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    flex-direction: row;
    gap: 8px
}

bento .two-columns>* {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    align-items: center;
    justify-content: center
}

bento .two-columns .social-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-direction: row
}

bento .two-columns .social-line icon {
    width: 16px;
    height: 16px;
    opacity: 0.72
}

bento .line {
    display: flex;
    flex-direction: row;
    overflow: clip;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill;
    justify-content: space-between;
    align-items: center;
    text-overflow: ellipsis;
    gap: 8px;
    opacity: 0.9
}

bento .line span {
    opacity: 0.48;
    text-overflow: none
}

bento:has(.ui-items) {
    padding-bottom: 0
}

@media screen and (max-width: 500px) {
    bento {
        padding: 12px;
        font-size: 0.85em
    }

    bento .title {
        gap: 6px
    }

    bento .title icon {
        width: 18px;
        height: 18px
    }

    bento .title span {
        font-size: 14px;
        line-height: 1.2
    }

    bento .title .subtitle {
        font-size: 11px
    }

    bento h2 {
        font-size: 28px
    }

    bento h3 {
        font-size: 22px
    }

    bento p {
        font-size: 13px;
        line-height: 1.3
    }

    bento .paragraph {
        gap: 6px
    }

    bento.big {
        padding: 16px;
        grid-row-end: span 2
    }

    bento.big h2 {
        font-size: 32px
    }

    bento.big h3 {
        font-size: 24px
    }

    bento.big p {
        font-size: 14px
    }

    bento .bento-navigation {
        bottom: 8px;
        right: 8px
    }
}

item-shiki {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 350px;
    width: 100%;
    max-width: 550px;
    gap: 12px;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 12px
}

item-shiki img {
    height: 100%;
    border-radius: 4px
}

item-shiki .info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%
}

item-shiki .info a {
    align-items: center;
    display: flex;
    gap: 4px;
    opacity: 0.72
}

item-shiki .info a img {
    opacity: 0.48
}

item-shiki .bar {
    height: 2px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    border-radius: 2px
}

item-shiki:hover {
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out
}

item-shiki:hover::before {
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

item-shiki:hover:hover::before {
    opacity: 1;
    animation: glow-animation 1.5s infinite alternate
}

@keyframes glow-animation {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.04)
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.09)
    }
}

.github-calendar {
    width: 100%;
    height: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden
}

.github-calendar .calendar-months {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 400;
    color: var(--white);
    opacity: 0.6;
    height: 14px;
    flex-shrink: 0
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-months {
        font-size: 9px;
        padding: 0 10px;
        height: 12px
    }
}

.github-calendar .calendar-container {
    display: flex;
    gap: 6px;
    height: 100%;
    min-height: 0
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-container {
        gap: 4px
    }
}

.github-calendar .calendar-days {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 10px;
    font-weight: 400;
    color: var(--white);
    opacity: 0.6;
    width: 24px;
    flex-shrink: 0;
    padding-top: 2px
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-days {
        font-size: 8px;
        width: 20px
    }
}

.github-calendar .calendar-days span {
    height: calc((100% - 12px) / 7);
    display: flex;
    align-items: center;
    text-align: left
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-days span {
        height: calc((100% - 9px) / 7)
    }
}

.github-calendar .calendar-grid {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    height: 100%;
    width: 100%;
    min-width: 0
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-grid {
        gap: 1.5px
    }
}

.github-calendar .calendar-grid .calendar-day {
    aspect-ratio: 1/1;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
}

.github-calendar .calendar-grid .calendar-day.level-0 {
    background-color: rgba(255, 255, 255, 0.06)
}

.github-calendar .calendar-grid .calendar-day.level-1 {
    background-color: #9be9a8
}

.github-calendar .calendar-grid .calendar-day.level-2 {
    background-color: #40c463
}

.github-calendar .calendar-grid .calendar-day.level-3 {
    background-color: #30a14e
}

.github-calendar .calendar-grid .calendar-day.level-4 {
    background-color: #216e39
}

.github-calendar .calendar-grid .calendar-day:hover {
    outline: 1px solid rgba(255, 255, 255, 0.4);
    outline-offset: -1px;
    transform: scale(1.1);
    z-index: 1;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.09);
}

@media screen and (max-width: 500px) {
    .github-calendar .calendar-grid .calendar-day {
        border-radius: 1px
    }

    .github-calendar .calendar-grid .calendar-day:hover {
        transform: scale(1.05);
        cursor: pointer;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
    }
}

#realtimeCursorLayer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    font-family: var(--font-family, "Mulish", sans-serif);
    transition: opacity 0.25s ease, visibility 0.25s ease
}

#realtimeCursorLayer.cursor-layer-hidden {
    opacity: 0;
    visibility: hidden
}

.visitor-cursor {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    min-width: 0;
    transition: left 0.32s cubic-bezier(0.2, 0.8, 0.25, 1), top 0.32s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.25s ease;
    will-change: left, top;
    z-index: 1;
    width: 0;
    height: 0;
    --cursor-label-shift-x: 0px;
    --cursor-label-shift-y: 0px;
    --cursor-chat-shift-x: 0px;
    --cursor-chat-shift-y: 0px
}

.visitor-cursor icon.cursor-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 24px;
    color: var(--cursor-color, #ffffff);
    transform: translate(-55%, -62%) rotate(-6deg);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease
}

.visitor-cursor[data-cursor-self="1"] icon.cursor-icon {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transform: translate(-55%, -62%) scale(0.7) rotate(-6deg)
}

.visitor-cursor .cursor-id-badge {
    position: absolute;
    left: -6px;
    top: 48px;
    transform: translate(-60%, -130%);
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(5, 10, 30, 0.9);
    color: #f8fafc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease
}

.visitor-cursor .cursor-id-badge[data-visible="1"] {
    opacity: 1;
    transform: translate(-60%, -170%)
}

.visitor-cursor[data-cursor-self="1"] .cursor-id-badge {
    display: none
}

.visitor-cursor .cursor-label {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    position: absolute;
    left: 0;
    top: 2px;
    transform: translate(7%, 0) translate(var(--cursor-label-shift-x, 0px), var(--cursor-label-shift-y, 0px));
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    transition: top 0.2s ease, transform 0.2s ease, left 0.2s ease
}

.visitor-cursor .cursor-label:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.visitor-cursor[data-cursor-self="1"] .cursor-label {
    display: none
}

.visitor-cursor .cursor-label.cursor-label-gold .cursor-label-name {
    background-image: linear-gradient(120deg, #fff2c1 0%, #f7b733 48%, #ffe29a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none
}

.visitor-cursor .cursor-label-name {
    display: inline-block;
    max-width: clamp(160px, 26vw, 320px);
    text-overflow: ellipsis;
    overflow: hidden
}

.visitor-cursor .cursor-label icon.cursor-label-icon,
.visitor-cursor .cursor-label-icon {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    border: var(--ui-stroke-width, 1px) solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em
}

.visitor-cursor .cursor-label icon.cursor-label-icon[hidden],
.visitor-cursor .cursor-label-icon[hidden] {
    display: none
}

.visitor-cursor.cursor-edge-left .cursor-label {
    left: 14px;
    transform: translate(0, 0) translate(var(--cursor-label-shift-x, 0px), var(--cursor-label-shift-y, 0px))
}

.visitor-cursor.cursor-edge-left .cursor-chat-stack {
    transform: translate(0, 0) translate(var(--cursor-chat-shift-x, 0px), var(--cursor-chat-shift-y, 0px));
    align-items: flex-start
}

.visitor-cursor.cursor-edge-right .cursor-label {
    left: -14px;
    transform: translate(-100%, 0) translate(var(--cursor-label-shift-x, 0px), var(--cursor-label-shift-y, 0px))
}

.visitor-cursor.cursor-edge-right .cursor-chat-stack {
    transform: translate(-100%, 0) translate(var(--cursor-chat-shift-x, 0px), var(--cursor-chat-shift-y, 0px));
    align-items: flex-end
}

.visitor-cursor.cursor-edge-top .cursor-label {
    top: 16px
}

.visitor-cursor.cursor-edge-top:not(.cursor-edge-left):not(.cursor-edge-right) .cursor-label {
    left: 0;
    transform: translate(-50%, 0) translate(var(--cursor-label-shift-x, 0px), var(--cursor-label-shift-y, 0px))
}

.visitor-cursor.cursor-edge-top .cursor-chat-stack {
    bottom: auto;
    top: calc(100% + 14px)
}

.visitor-cursor.cursor-edge-bottom .cursor-label {
    top: auto;
    bottom: 16px
}

.visitor-cursor.cursor-edge-bottom:not(.cursor-edge-left):not(.cursor-edge-right) .cursor-label {
    left: 0;
    transform: translate(-50%, 0) translate(var(--cursor-label-shift-x, 0px), var(--cursor-label-shift-y, 0px))
}

.visitor-cursor.cursor-edge-bottom .cursor-chat-stack {
    top: auto;
    bottom: calc(100% + 46px)
}

.visitor-cursor .cursor-chat-stack {
    position: absolute;
    left: 0;
    bottom: calc(100% + 16px);
    transform: translate(calc(-50% - 0px), 0) translate(var(--cursor-chat-shift-x, 0px), var(--cursor-chat-shift-y, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 4;
    transition: bottom 0.2s ease, top 0.2s ease, transform 0.2s ease
}

.visitor-cursor .cursor-chat-stack[data-has-image="1"] {
    pointer-events: auto
}

html.cursor-chat-messages-hidden .visitor-cursor .cursor-chat-stack {
    display: none !important
}

.visitor-cursor .cursor-chat-box {
    border-radius: var(--ui-rounding, 18px);
    padding: 8px 12px;
    background: rgba(25, 25, 30, 0.9);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width, 1px) solid var(--ui-stroke, rgba(243, 244, 245, 0.18));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    line-height: 1.35;
    color: var(--white);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    max-width: clamp(180px, 20vw, 280px);
    width: -moz-max-content;
    width: max-content;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
    justify-content: flex-start;
    pointer-events: auto
}

.visitor-cursor .cursor-chat-box.cursor-chat-typing {
    opacity: 0.8
}

.visitor-cursor .cursor-chat-box.cursor-chat-typing .cursor-chat-text {
    font-style: italic;
    letter-spacing: 0.04em
}

.visitor-cursor .cursor-chat-box.cursor-chat-typing-preview {
    opacity: 1
}

.visitor-cursor .cursor-chat-box.cursor-chat-typing-preview .cursor-chat-text {
    font-style: normal;
    letter-spacing: 0.01em
}

.visitor-cursor .cursor-chat-box.cursor-chat-has-image {
    padding: 8px;
    max-width: min(44vw, 360px)
}

.visitor-cursor .cursor-chat-box.cursor-chat-empty .cursor-chat-text {
    display: none
}

.visitor-cursor[data-cursor-self="0"] .cursor-chat-box {
    opacity: 0.9
}

.visitor-cursor[data-cursor-self="1"] .cursor-chat-box {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.35)
}

.visitor-cursor .cursor-chat-text {
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.visitor-cursor .cursor-chat-image {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease
}

.visitor-cursor .cursor-chat-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: min(44vw, 360px);
    max-height: min(42vh, 320px);
    -o-object-fit: cover;
    object-fit: cover
}

.visitor-cursor .cursor-chat-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35));
    opacity: 0;
    transition: opacity 0.2s ease
}

.visitor-cursor .cursor-chat-image:hover,
.visitor-cursor .cursor-chat-image:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35)
}

.visitor-cursor .cursor-chat-image:hover::after,
.visitor-cursor .cursor-chat-image:focus-visible::after {
    opacity: 1
}

.visitor-cursor .cursor-chat-image:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 3px
}

.visitor-cursor .cursor-edge-chevron {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: var(--ui-stroke-width, 1px) solid rgba(255, 255, 255, 0.45);
    background: rgba(9, 9, 12, 0.9);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    color: rgba(255, 255, 255, 0.85);
    --cursor-chevron-rotation: 0deg
}

.visitor-cursor .cursor-edge-chevron::after {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(var(--cursor-chevron-rotation));
    display: block
}

.visitor-cursor[data-cursor-chevron=left] .cursor-edge-chevron {
    display: inline-flex;
    left: -10px;
    top: 0;
    transform: translate(-165%, -50%);
    --cursor-chevron-rotation: 225deg
}

.visitor-cursor[data-cursor-chevron=right] .cursor-edge-chevron {
    display: inline-flex;
    left: 10px;
    top: 0;
    transform: translate(165%, -50%);
    --cursor-chevron-rotation: 45deg
}

.visitor-cursor[data-cursor-chevron=up] .cursor-edge-chevron {
    display: inline-flex;
    left: 0;
    top: 24px;
    transform: translate(-50%, -185%);
    --cursor-chevron-rotation: -45deg
}

.visitor-cursor[data-cursor-chevron=down] .cursor-edge-chevron {
    display: inline-flex;
    left: 0;
    top: -40px;
    transform: translate(-50%, 185%);
    --cursor-chevron-rotation: 135deg
}

.visitor-cursor .cursor-label-extras {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    min-width: 0
}

.visitor-cursor .cursor-label-extras[data-visible="0"] {
    display: none
}

.visitor-cursor .cursor-label-extra {
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4))
}

.visitor-cursor.cursor-highlight-gold .cursor-label {
    border-color: rgba(250, 204, 21, 0.95);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.4)
}

.visitor-cursor.cursor-highlight-red .cursor-label {
    border-color: rgba(248, 113, 113, 0.95);
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.35)
}

html.cursor-id-mode .visitor-cursor,
html.cursor-interactions-enabled .visitor-cursor {
    pointer-events: auto
}

html.cursor-id-mode .visitor-cursor .cursor-label,
html.cursor-interactions-enabled .visitor-cursor .cursor-label {
    pointer-events: auto;
    cursor: pointer
}

.cursor-click-ripple {
    position: fixed;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2.5px solid rgba(255, 219, 137, 0.85);
    background: transparent;
    pointer-events: none;
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.35);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease, border-color 0.45s ease;
    z-index: 999;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    box-shadow: 0 0 18px rgba(255, 209, 117, 0.45)
}

.cursor-click-ripple.cursor-click-ripple-active {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
    border-color: rgba(255, 219, 137, 0)
}

html.cursor-click-ripple-disabled .cursor-click-ripple {
    display: none
}

#cursorChatInputWrapper {
    position: fixed;
    box-sizing: border-box;
    left: 50%;
    bottom: clamp(24px, 6vh, 72px);
    top: auto;
    transform: translate3d(-50%, 140%, 0);
    width: min(290px, 100vw - 64px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 18px 8px;
    border-radius: var(--ui-rounding, 20px);
    border: var(--ui-stroke-width, 1px) solid var(--ui-stroke, rgba(243, 244, 245, 0.18));
    background-image: url("/assets/noise.webp");
    box-shadow: 0 22px 32px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s ease
}

#cursorChatInputWrapper:not(.floating) {
    left: 50%;
    bottom: clamp(24px, 6vh, 72px);
    top: auto;
    transform: translate3d(-50%, 140%, 0)
}

#cursorChatInputWrapper.floating {
    left: var(--cursor-chat-x, 50%);
    top: var(--cursor-chat-y, 50%);
    bottom: auto;
    transform: translate(-50%, calc(-100% - 8px)) scale(0.95)
}

#cursorChatInputWrapper.visible {
    opacity: 1;
    pointer-events: auto
}

#cursorChatInputWrapper:not(.floating).visible {
    transform: translate3d(-50%, 0, 0)
}

#cursorChatInputWrapper.floating.visible {
    transform: translate(-50%, calc(-100% - 18px)) scale(1)
}

#cursorChatInputWrapper.floating.cursor-chat-input-below {
    transform: translate(-50%, 12px) scale(0.95)
}

#cursorChatInputWrapper.floating.cursor-chat-input-below.visible {
    transform: translate(-50%, 24px) scale(1)
}

#cursorChatInputWrapper .cursor-chat-nameplate {
    position: absolute;
    top: 12px;
    left: 20px;
    transform: translate(0, calc(-100% - 8px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: var(--ui-stroke-width, 1px) solid rgba(243, 244, 245, 0.15);
    background: rgba(36, 36, 36, 0.5843137255);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    font-weight: 600;
    color: rgba(243, 244, 245, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease
}

#cursorChatInputWrapper.visible .cursor-chat-nameplate {
    opacity: 1;
    transform: translate(0, calc(-100% - 2px))
}

#cursorChatInputWrapper .cursor-chat-nameplate-text {
    color: rgba(243, 244, 245, 0.95)
}

#cursorChatInputWrapper .cursor-chat-nameplate-badge {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0c0c0f;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35)
}

#cursorChatInputWrapper .cursor-chat-nameplate-icon {
    font-size: 16px;
    line-height: 1;
    color: #0c0c0f;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

#cursorChatInputWrapper .cursor-chat-nameplate-initial {
    font-size: 12px
}

#cursorChatInputWrapper .cursor-chat-input-row {
    display: flex;
    align-items: center;
    gap: 12px
}

#cursorChatInputWrapper .cursor-chat-attachments {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px
}

#cursorChatInputWrapper .cursor-chat-attachments[hidden] {
    display: none !important
}

#cursorChatInputWrapper .cursor-chat-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    min-height: 64px;
    padding: 6px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03)
}

#cursorChatInputWrapper .cursor-chat-attachment.uploading {
    opacity: 0.75
}

#cursorChatInputWrapper .cursor-chat-attachment-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

#cursorChatInputWrapper .cursor-chat-attachment-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#cursorChatInputWrapper .cursor-chat-attachment-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    flex: 1 1 auto
}

#cursorChatInputWrapper .cursor-chat-attachment-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#cursorChatInputWrapper .cursor-chat-attachment-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65)
}

#cursorChatInputWrapper .cursor-chat-attachment-remove {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 6px 14px;
    min-height: 34px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap
}

#cursorChatInputWrapper .cursor-chat-attachment-remove:hover,
#cursorChatInputWrapper .cursor-chat-attachment-remove:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(14, 14, 18, 0.95);
    border-color: rgba(255, 255, 255, 0.45)
}

#cursorChatInputWrapper .cursor-chat-attachment-remove::before {
    content: "x";
    font-size: 12px;
    font-weight: 700;
    line-height: 1
}

#cursorChatInputWrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--white, #fff);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    outline: none;
    padding: 0
}

#cursorChatInputWrapper input::-moz-placeholder {
    color: rgba(243, 244, 245, 0.55)
}

#cursorChatInputWrapper input::placeholder {
    color: rgba(243, 244, 245, 0.55)
}

#cursorChatInputWrapper .cursor-chat-key-hint {
    font-size: 14px;
    font-weight: 600;
    color: rgba(243, 244, 245, 0.8);
    padding: 4px 10px;
    border-radius: 999px;
    border: var(--ui-stroke-width, 1px) solid var(--ui-stroke, rgba(243, 244, 245, 0.25));
    background: rgba(255, 255, 255, 0.04)
}

#cursorChatInputWrapper.chat-disabled {
    opacity: 0.45;
    pointer-events: none
}

#cursorChatInputWrapper.chat-disabled input {
    cursor: not-allowed
}

.chat-shortcut-name {
    font-weight: 600
}

#cursorChatDock {
    position: fixed;
    left: clamp(12px, 3vw, 28px);
    bottom: clamp(18px, 2vh, 64px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    z-index: 6;
    pointer-events: none;
    max-width: min(520px, 100vw - 24px)
}

.cursor-chat-dock-button {
    pointer-events: auto;
    border-radius: 999px;
    border: var(--ui-stroke-width, 1px) solid var(--ui-stroke, rgba(243, 244, 245, 0.2));
    background: rgba(14, 14, 18, 0.85);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    color: rgba(243, 244, 245, 0.95);
    min-height: 38px;
    padding: 0 8px 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
    cursor: pointer;
    position: relative;
    touch-action: manipulation
}

.cursor-chat-dock-button:active {
    transform: translateY(2px)
}

.cursor-chat-dock-button:disabled {
    opacity: 0.45;
    cursor: not-allowed
}

#cursorChatMobileToggle {
    display: none;
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center
}

#cursorChatMobileToggle.visible {
    display: inline-flex
}

#cursorChatMobileToggle icon {
    width: 22px;
    height: 22px;
    background-color: currentColor
}

#cursorChatMobileToggle.active {
    background: rgba(243, 244, 245, 0.15)
}

#cursorChatMobileToggle.disabled {
    opacity: 0.45;
    pointer-events: none
}

#cursorChatMobileToggle:not(.disabled):active {
    transform: translateY(2px)
}

.cursor-chat-reply-button {
    flex: 1 1 auto;
    min-width: 0;
    display: none
}

.cursor-chat-reply-button.visible {
    display: inline-flex
}

.cursor-chat-hide-button {
    min-width: 40px;
    max-width: 48px;
    padding: 0;
    display: none
}

.cursor-chat-hide-button.visible {
    display: inline-flex
}

.cursor-chat-hide-button icon {
    width: 20px;
    height: 20px;
    background-color: currentColor
}

.cursor-chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 71, 87, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none
}

.cursor-chat-unread-badge[data-visible="1"] {
    opacity: 1;
    transform: scale(1)
}

.cursor-chat-online-indicator {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 8px) scale(0.9);
    min-width: 24px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(42, 209, 138, 0.95);
    color: rgba(2, 15, 8, 0.92);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(42, 209, 138, 0.35);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease
}

.cursor-chat-online-indicator[data-visible="1"] {
    opacity: 1;
    transform: translate(-50%, 2px) scale(1)
}

.cursor-chat-mobile-panel {
    position: fixed;
    left: clamp(12px, 3vw, 28px);
    bottom: clamp(68px, 8vh, 120px);
    width: min(320px, 100vw - 80px);
    max-height: min(450px, 55vh);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 5
}

.cursor-chat-mobile-panel.open {
    opacity: 1;
    pointer-events: none;
    transform: translateY(0)
}

.cursor-chat-mobile-messages-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    pointer-events: none;
    --cursor-chat-mask-size: clamp(24px, 6vh, 72px);
    --cursor-chat-mask-top-strength: 1;
    --cursor-chat-mask-bottom-strength: 1;
    --cursor-chat-mask-top-length: calc(var(--cursor-chat-mask-size) * var(--cursor-chat-mask-top-strength));
    --cursor-chat-mask-bottom-length: calc(var(--cursor-chat-mask-size) * var(--cursor-chat-mask-bottom-strength));
    --cursor-chat-mask-top-soft: calc(var(--cursor-chat-mask-top-length) * 0.4);
    --cursor-chat-mask-bottom-soft: calc(var(--cursor-chat-mask-bottom-length) * 0.4)
}

.cursor-chat-mobile-messages-container[data-mask-top="0"] {
    --cursor-chat-mask-top-strength: 0
}

.cursor-chat-mobile-messages-container[data-mask-bottom="0"] {
    --cursor-chat-mask-bottom-strength: 0
}

.cursor-chat-mobile-messages-container:not([data-no-overflow]) {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, calc(var(--cursor-chat-mask-top-strength) * 0.55)) var(--cursor-chat-mask-top-soft), rgb(0, 0, 0) var(--cursor-chat-mask-top-length), rgb(0, 0, 0) calc(100% - var(--cursor-chat-mask-bottom-length)), rgba(0, 0, 0, calc(var(--cursor-chat-mask-bottom-strength) * 0.55)) calc(100% - var(--cursor-chat-mask-bottom-soft)), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, calc(var(--cursor-chat-mask-top-strength) * 0.55)) var(--cursor-chat-mask-top-soft), rgb(0, 0, 0) var(--cursor-chat-mask-top-length), rgb(0, 0, 0) calc(100% - var(--cursor-chat-mask-bottom-length)), rgba(0, 0, 0, calc(var(--cursor-chat-mask-bottom-strength) * 0.55)) calc(100% - var(--cursor-chat-mask-bottom-soft)), rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha
}

.cursor-chat-mobile-messages-container::-webkit-scrollbar {
    width: 0;
    height: 0
}

.cursor-chat-mobile-messages {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cursor-chat-mobile-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(14, 14, 18, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    backdrop-filter: blur(18px) saturate(1.05);
    border: 1px solid rgba(243, 244, 245, 0.18);
    animation: message-slide-in 0.25s ease;
    box-sizing: border-box;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    pointer-events: auto
}

.cursor-chat-mobile-message.cursor-chat-system-message {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0;
    width: 100%;
    max-width: none;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.0705882353);
    justify-content: center;
    gap: 0
}

.cursor-chat-system-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 244, 245, 0.58);
    text-align: center;
    width: 100%
}

.cursor-chat-mobile-message.self {
    background: rgba(137, 181, 255, 0.15);
    border-color: rgba(137, 181, 255, 0.3)
}

.cursor-chat-minigame-card {
    background: rgba(8, 12, 20, 0.95);
    border-color: rgba(96, 147, 255, 0.4)
}

.cursor-chat-minigame-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.cursor-chat-minigame-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(243, 244, 245, 0.92)
}

.cursor-chat-minigame-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(73, 235, 177, 0.2);
    color: rgba(180, 255, 222, 0.95)
}

.cursor-chat-minigame-players,
.cursor-chat-minigame-meta {
    font-size: 12px;
    color: rgba(243, 244, 245, 0.72)
}

.cursor-chat-minigame-players {
    margin-top: 6px
}

.cursor-chat-minigame-meta {
    margin-top: 2px;
    color: rgba(243, 244, 245, 0.58)
}

.cursor-chat-minigame-meta[data-visible="0"] {
    display: none
}

.cursor-chat-mobile-user {
    font-size: 12px;
    font-weight: 600;
    color: rgba(243, 244, 245, 0.8);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%
}

.cursor-chat-mobile-user-icon {
    font-size: 14px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85
}

.cursor-chat-mobile-user-icon[hidden] {
    display: none
}

.cursor-chat-mobile-user-name {
    flex: 1;
    color: inherit;
    letter-spacing: 0.01em
}

.cursor-chat-mobile-user-id {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 244, 245, 0.55);
    display: none
}

html.cursor-id-mode .cursor-chat-mobile-user-id {
    display: inline-flex
}

.cursor-chat-mobile-text {
    font-size: 14px;
    color: rgba(243, 244, 245, 0.95);
    word-wrap: break-word;
    line-height: 1.4
}

.cursor-chat-mobile-media {
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 4px;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease
}

.cursor-chat-mobile-media:hover,
.cursor-chat-mobile-media:focus-visible {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35)
}

.cursor-chat-mobile-media:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 2px
}

.cursor-chat-mobile-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.cursor-chat-mobile-preview-feed {
    position: fixed;
    left: clamp(12px, 3vw, 28px);
    bottom: clamp(68px, 8vh, 120px);
    width: min(300px, 100vw - 90px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    z-index: 4;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease
}

.cursor-chat-reply-hotkey {
    min-width: 30px
}

.cursor-chat-mobile-preview-feed[data-empty="1"] {
    opacity: 0;
    pointer-events: none
}

:root.cursor-chat-panel-open .cursor-chat-mobile-preview-feed,
:root.cursor-chat-messages-hidden .cursor-chat-mobile-preview-feed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px)
}

.cursor-chat-mobile-preview {
    pointer-events: auto;
    border-radius: 18px;
    padding: 0;
    display: block;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease
}

.cursor-chat-mobile-preview .cursor-chat-mobile-message {
    width: -moz-fit-content;
    width: fit-content
}

.cursor-chat-mobile-preview .cursor-chat-mobile-message .cursor-chat-system-text {
    display: none
}

.cursor-chat-mobile-preview.visible {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.cursor-chat-mobile-preview.fading {
    opacity: 0;
    transform: translateY(-6px) scale(0.97)
}

.cursor-chat-mobile-preview:focus-visible {
    outline: 2px solid rgba(138, 180, 255, 0.5);
    outline-offset: 2px
}

@keyframes message-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

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

html.cursor-chat-mobile-enabled #cursorChatInputWrapper:not(.floating) {
    width: min(290px, 100vw - 96px);
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate3d(-50%, 60%, 0)
}

html.cursor-chat-mobile-enabled #cursorChatInputWrapper:not(.floating).visible {
    transform: translate3d(-50%, -50%, 0)
}

.cursor-chat-image-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 40px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease
}

.cursor-chat-image-modal[data-visible="1"] {
    opacity: 1;
    pointer-events: auto
}

.cursor-chat-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 10, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1)
}

.cursor-chat-image-modal-content {
    position: relative;
    z-index: 1;
    width: min(90vw, 900px);
    max-height: min(90vh, 640px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 6, 10, 0.92);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.65);
    padding: clamp(16px, 2vw, 32px)
}

.cursor-chat-image-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    transition: background 0.2s ease, transform 0.2s ease
}

.cursor-chat-image-modal-close::before {
    content: "x";
    font-weight: 600
}

.cursor-chat-image-modal-close:hover,
.cursor-chat-image-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05)
}

.cursor-chat-image-modal-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cursor-chat-image-modal-figure img {
    width: 100%;
    max-height: min(75vh, 520px);
    border-radius: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    background: #020205
}

.cursor-chat-image-modal-caption {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em
}

html.cursor-chat-image-modal-open {
    overflow: hidden
}

#cursorActionMenu {
    position: fixed;
    z-index: 5200;
    min-width: 220px;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    color: var(--white)
}

#cursorActionMenu:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

#cursorActionMenu[data-visible="1"] {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1)
}

#cursorActionMenu .cursor-action-menu-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85
}

#cursorActionMenu .cursor-action-menu-subtitle {
    font-size: 13px;
    opacity: 0.65;
    margin-bottom: 10px
}

#cursorActionMenu .cursor-action-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 6px
}

#cursorActionMenu .cursor-action-button {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 10px 12px;
    border-radius: 12px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px
}

#cursorActionMenu .cursor-action-button:hover {
    background-color: rgba(255, 255, 255, 0.08)
}

#cursorActionMenu .cursor-action-button-label {
    font-size: 14px;
    font-weight: 600
}

#cursorActionMenu .cursor-action-button-hint {
    font-size: 12px;
    opacity: 0.6
}

.cursor-interaction-modal {
    position: fixed;
    z-index: 5400;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    padding: 14px 16px;
    width: min(320px, 100vw - 32px);
    max-width: 340px;
    max-height: min(70vh, 320px);
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition: opacity 0.15s ease, transform 0.15s ease
}

.cursor-interaction-modal:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.cursor-interaction-modal[data-visible="1"] {
    pointer-events: auto;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.cursor-interaction-modal-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: white
}

.cursor-interaction-modal-message {
    font-size: 12px;
    opacity: 0.82;
    margin-bottom: 8px;
    color: white
}

.cursor-interaction-modal-actions {
    display: flex;
    gap: 8px
}

.cursor-interaction-modal-actions button {
    flex: 1;
    min-width: 0;
    height: 30px;
    font-size: 12px;
    border-radius: 10px
}

.cursor-interaction-accept {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.45)
}

.cursor-interaction-decline {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.4)
}

.cursor-game-panel-root {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5300;
    pointer-events: none
}

.cursor-game-panel {
    pointer-events: auto;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/noise.webp");
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: -moz-fit-content;
    min-width: fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 380px;
    max-height: min(90vh, 600px);
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
    color: var(--white)
}

.cursor-game-panel:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.cursor-game-panel[data-role=watcher] {
    transform: scale(0.9);
    opacity: 0.85
}

.cursor-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px
}

.cursor-game-title {
    font-size: 14px;
    font-weight: 700
}

.cursor-game-close {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1
}

.cursor-game-versus {
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: 6px
}

.cursor-game-body {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible
}

.cursor-game-summary {
    font-size: 11px;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin-bottom: 2px
}

.cursor-game-summary[data-visible="0"] {
    display: none
}

.cursor-game-status {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em
}

.cursor-game-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px
}

.cursor-game-actions[data-visible="0"],
.cursor-game-actions:empty {
    display: none
}

.cursor-game-button {
    flex: 1;
    min-width: 0;
    height: 30px;
    font-size: 11.5px;
    border-radius: 9px;
    letter-spacing: 0.04em
}

.cursor-game-forfeit {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.45)
}

.tictactoe-board {
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px
}

.tictactoe-cell {
    min-width: 0;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    justify-content: center;
    align-items: center
}

.cursor-game-panel[data-role=watcher] .tictactoe-cell {
    width: 44px;
    height: 44px;
    font-size: 16px
}

.tictactoe-cell-win {
    border-color: rgba(250, 204, 21, 0.8) !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.4)
}

.rps-choice-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px
}

.rps-choice {
    min-width: 0;
    width: 100%;
    height: 50px;
    font-size: 22px;
    border-radius: 10px
}

.rps-choice-selected {
    border-color: rgba(250, 204, 21, 0.8)
}

.cursor-game-panel[data-role=watcher] .rps-choice {
    height: 48px;
    font-size: 20px
}

.chess-clock-row {
    display: flex;
    gap: 8px;
    align-items: stretch
}

.chess-clock-row[data-visible="0"] {
    display: none
}

.chess-clock {
    flex: 1;
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.chess-clock:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.chess-clock[data-active="1"] {
    border-color: rgba(250, 204, 21, 0.7);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.25)
}

.chess-clock-name {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7
}

.chess-clock-time {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em
}

.chess-board-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06)
}

.chess-board[data-pending="1"] {
    position: relative
}

.chess-board[data-pending="1"]::after {
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.7
}

.chess-square {
    border: none;
    border-radius: 0;
    min-width: 0;
    padding: 0;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--white);
    position: relative;
    cursor: pointer;
    background: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease
}

.chess-square:not([disabled]):active {
    transform: scale(0.95)
}

.chess-square[data-piece-color=white] {
    color: #f8fafc;
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.6)
}

.chess-square[data-piece-color=black] {
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35)
}

.chess-square-dark {
    background: rgba(184, 135, 98, 0.5843137255)
}

.chess-square-light {
    background: rgba(237, 214, 176, 0.5843137255)
}

.chess-square[disabled] {
    cursor: default;
    opacity: 0.65
}

.chess-square-selected {
    box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.85)
}

.chess-square-target::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.85);
    opacity: 0.7;
    pointer-events: none
}

.chess-square-target-capture::after {
    width: 80%;
    height: 80%;
    border: 3px solid rgba(250, 204, 21, 0.85);
    background: transparent;
    pointer-events: none
}

.chess-square-check {
    box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.85)
}

.chess-square-last {
    outline: 2px solid rgba(59, 130, 246, 0.8)
}

.chess-move-log {
    max-height: 120px;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px;
    font-size: 12px;
    display: none !important;
    flex-direction: column;
    gap: 4px
}

.chess-move-log[data-visible="0"] {
    display: none
}

.chess-move-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr;
    gap: 4px;
    align-items: center
}

.chess-move-index {
    opacity: 0.7;
    font-weight: 600
}

.chess-move {
    opacity: 0.85;
    font-weight: 500
}

.chess-promotion-picker {
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 60
}

.chess-promotion-picker:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover)
}

.chess-promotion-label {
    font-size: 12px;
    opacity: 0.8;
    color: white
}

.chess-promotion-options {
    display: flex;
    gap: 8px
}

.chess-promotion-option {
    flex: 1;
    min-width: 0;
    height: 36px;
    font-size: 18px;
    border-radius: 10px
}

.clickable {
    cursor: pointer !important
}

.disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important
}

.components {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 24px
}

.facebook {
    color: white;
}

/* GitHub commits list — avoid flex/height clash with calendar + tiltCard parent */
bento.github .ui-items.github-commits {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
}

.github-commits-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* GitHub commits list styling */
.github-commits .ui-item {
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.github-commits .ui-item:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
}

.github-commits .git_commit {
    font-size: 22px;
    color: #9be3ff;
    min-width: 28px;
}

.github-commits .item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.github-commits .item>span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--white);
}

.github-commits .commit-meta {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 400;
}

.github-commits .description {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.25;
    max-height: 3.25em;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 600px) {
    .github-commits .ui-item {
        padding: 8px;
        gap: 8px;
    }

    .github-commits .git_commit {
        font-size: 18px;
    }
}

.bento-donate-btn {
    --white: #F3F4F5;
    --black: #19191E;
    --black-transparent: #19191E36;
    --ui: #19191E12;
    --ui-slight: #19191E06;
    --ui-stroke: #F3F4F512;
    --ui-stroke-hover: #F3F4F524;
    --ui-stroke-transparent: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF %, #FFFFFF00 100%);
    --ui-height: 44px;
    --ui-stroke-width: 1.85px;
    --ui-rounding: 20px;
    --font-family: "Mulish", sans-serif;
    font-family: var(--font-family);
    -webkit-font-smoothing: subpixel-antialiased;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    height: 44px;
    width: 100%;
    margin-top: 8px;
    border: var(--ui-stroke-width) solid var(--ui-stroke);
    border-radius: var(--ui-rounding);
    backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    -webkit-backdrop-filter: blur(12px) saturate(1.05) brightness(0.95);
    color-scheme: dark;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    background-image: url("/assets/img/noise.webp");
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    transition: all 0.15s ease;
    background-color: rgba(25, 25, 30, 0) !important;
    padding: 0 16px;
    color: var(--white);
    outline: none;
    box-sizing: border-box;
    font-weight: 600;
}

.bento-donate-btn:hover {
    border: var(--ui-stroke-width) solid var(--ui-stroke-hover);
    transform: scale(1.02);
}

.bento-donate-btn:active {
    transform: scale(0.98);
}