@font-face {
    font-family: "TNOAldrich";
    src: url("./aldrich.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "TNOBomb";
    src: url("./bomb.otf") format("opentype");
    font-display: swap;
}

body.firstVisitNoticeOpen {
    height: 100dvh;
    overflow: hidden;
}

.firstVisitNotice[hidden],
.firstVisitSignalLayer[hidden] {
    display: none !important;
}

.firstVisitNotice {
    --first-visit-scale: 1;
    position: fixed;
    inset: 0;
    z-index: 1500000;
    display: grid;
    place-items: center;
    overflow: auto;
    box-sizing: border-box;
    padding: 12px;
    color: #e8f0ed;
    background:
        linear-gradient(rgba(2, 5, 7, 0.72), rgba(2, 5, 7, 0.84)),
        url("./tno-workbench-map.png") center / cover no-repeat,
        #030606;
    isolation: isolate;
}

.firstVisitNotice::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(91, 238, 228, 0.035) 0,
            rgba(91, 238, 228, 0.035) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(circle at 50% 45%, transparent 0 24%, rgba(0, 0, 0, 0.54) 78%);
}

.firstVisitViewport {
    position: relative;
    width: calc(943px * var(--first-visit-scale));
    height: calc(487px * var(--first-visit-scale));
    flex: none;
}

.firstVisitScale {
    position: absolute;
    inset: 0 auto auto 0;
    width: 943px;
    height: 487px;
    transform: scale(var(--first-visit-scale));
    transform-origin: left top;
}

.firstVisitDialog {
    position: absolute;
    top: 45px;
    left: 0;
    width: 943px;
    height: 442px;
    outline: none;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.78));
}

.firstVisitFrame {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("./first-visit-assets/background.webp") 0 0 / 943px 442px no-repeat;
    pointer-events: none;
}

.firstVisitTabs {
    position: absolute;
    top: -39px;
    left: 99px;
    z-index: 4;
    display: flex;
    width: 564px;
    height: 45px;
}

.firstVisitTab {
    position: relative;
    display: flex;
    width: 188px;
    height: 45px;
    align-items: center;
    gap: 7px;
    padding: 0 13px 2px 12px;
    border: 0;
    color: #dbe5e1;
    background:
        url("./first-visit-assets/top-tabs.webp")
        left top / 376px 45px no-repeat;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 18px;
    text-align: left;
    text-shadow:
        0 2px 1px #000,
        0 0 6px rgba(255, 255, 255, 0.12);
    cursor: pointer;
}

.firstVisitTab::before {
    width: 33px;
    height: 32px;
    flex: none;
    content: "";
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 66px 32px;
}

.firstVisitTab:nth-child(1)::before {
    background-image: url("./first-visit-assets/top-tabs-icon-1.webp");
}

.firstVisitTab:nth-child(2)::before {
    background-image: url("./first-visit-assets/top-tabs-icon-2.webp");
}

.firstVisitTab:nth-child(3)::before {
    background-image: url("./first-visit-assets/top-tabs-icon-3.webp");
}

.firstVisitTab:hover,
.firstVisitTab:focus-visible,
.firstVisitTab[aria-selected="true"] {
    color: #f2f7f4;
    background-position: right top;
}

.firstVisitTab:hover::before,
.firstVisitTab:focus-visible::before,
.firstVisitTab[aria-selected="true"]::before {
    background-position: right top;
}

.firstVisitTab:focus-visible,
.firstVisitMenuButton:focus-visible,
.firstVisitSecondaryAction:focus-visible,
.firstVisitContinue:focus-visible {
    outline: 2px solid #58ded9;
    outline-offset: -2px;
}

.firstVisitUi {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.firstVisitIdentity {
    position: absolute;
    top: 8px;
    left: 10px;
    display: flex;
    width: 174px;
    height: 36px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: #f0f3f0;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 17px;
    white-space: nowrap;
    text-shadow: 0 2px 1px #000;
}

.firstVisitIdentityIcon {
    position: relative;
    width: 25px;
    height: 17px;
    flex: none;
    border: 1px solid #5edbd5;
    background:
        linear-gradient(90deg, #25cfc9 0 38%, #102225 38% 46%, #25cfc9 46% 100%);
    box-shadow:
        0 0 6px rgba(72, 231, 222, 0.5),
        inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.firstVisitIdentityIcon::after {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #72f3ea;
    border-bottom: 2px solid #72f3ea;
    content: "";
}

.firstVisitMenu {
    position: absolute;
    top: 49px;
    left: 14px;
    display: grid;
    width: 169px;
    align-content: start;
    gap: 4px;
}

.firstVisitMenuLabel {
    display: flex;
    height: 30px;
    align-items: center;
    padding: 0 12px;
    color: #e9efec;
    background:
        url("./first-visit-assets/entry-folder.webp")
        left top / 338px 30px no-repeat;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 17px;
    text-shadow: 0 2px 1px #000;
}

.firstVisitMenuButton {
    width: 162px;
    height: 32px;
    margin-left: 7px;
    padding: 0 10px 2px 15px;
    overflow: hidden;
    border: 0;
    color: #dbe2df;
    background:
        url("./first-visit-assets/entry-content.webp")
        left top / 324px 32px no-repeat;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 15px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 1px #000;
    cursor: pointer;
}

.firstVisitMenuButton:hover,
.firstVisitMenuButton[aria-current="true"],
.firstVisitMenuButton:focus-visible {
    color: #f3f8f5;
    background-position: right top;
}

.firstVisitMenuButton[aria-current="true"] {
    filter: drop-shadow(0 0 4px rgba(87, 226, 218, 0.36));
}

.firstVisitContent {
    position: absolute;
    top: 14px;
    left: 195px;
    display: grid;
    width: 545px;
    height: 414px;
    grid-template-rows: auto minmax(0, 1fr) 38px;
    gap: 5px;
    box-sizing: border-box;
}

.firstVisitTitle {
    min-height: 32px;
    margin: 0;
    overflow: hidden;
    color: #9cef9e;
    font-family: "TNOAldrich", "WenHanJianZhu", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow:
        0 2px 1px #000,
        0 0 5px rgba(123, 239, 136, 0.32);
}

.firstVisitCopy {
    min-height: 0;
    overflow: auto;
    padding: 0 11px 18px 1px;
    color: #e7ece9;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1.48;
    text-align: left;
    text-shadow: 0 1px 1px #000;
    scrollbar-color: #4dd5cd #071113;
    scrollbar-width: thin;
}

.firstVisitCopy::-webkit-scrollbar {
    width: 8px;
}

.firstVisitCopy::-webkit-scrollbar-track {
    background: #071113;
}

.firstVisitCopy::-webkit-scrollbar-thumb {
    border: 1px solid #173639;
    background: #4bbab4;
}

.firstVisitLead {
    margin: 0 0 11px;
    color: #c2f2ed;
    font-family: "WenHanJianZhu", "RuiZheng", sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.firstVisitCopy section {
    scroll-margin-top: 6px;
}

.firstVisitLanguagePanel[hidden] {
    display: none;
}

.firstVisitLanguagePanel {
    position: relative;
}

.firstVisitCopy p {
    margin: 0 0 12px;
}

.firstVisitCopy strong {
    color: #f4f7f4;
    font-weight: 700;
}

.firstVisitCopy .isWarning {
    color: #f09b82;
}

.firstVisitCopy .isLocal {
    color: #88dfbd;
}

.firstVisitFinal {
    padding-top: 8px;
    border-top: 1px solid rgba(101, 219, 211, 0.28);
    color: #bce6e1;
}

.firstVisitSecondaryActions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: stretch;
    gap: 7px;
}

.firstVisitSecondaryAction {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0 10px 2px;
    border: 1px solid #68706b;
    color: #edf2ef;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05), transparent),
        #323735;
    box-sizing: border-box;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 1px #000;
    cursor: pointer;
}

.firstVisitSecondaryAction:hover {
    color: #fff;
    filter: brightness(1.18);
}

.firstVisitSecondaryAction.isDanger {
    border-color: #80605b;
    color: #f0d4cd;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04), transparent),
        #3c2d2a;
}

.firstVisitCoverSlot {
    position: absolute;
    top: 8px;
    left: 749px;
    width: 189px;
    height: 388px;
    background:
        #e7e4d8
        url("./first-visit-assets/notice-cover.png")
        50% 50% / cover no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(230, 237, 230, 0.2),
        inset 0 0 18px rgba(0, 0, 0, 0.32);
    filter:
        saturate(0.65)
        contrast(1.08)
        brightness(0.93)
        sepia(0.07);
    overflow: hidden;
    pointer-events: none;
}

.firstVisitCoverSlot::before,
.firstVisitCoverSlot::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.firstVisitCoverSlot::before {
    z-index: 1;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.17) 0,
            rgba(0, 0, 0, 0.17) 1px,
            rgba(116, 243, 231, 0.025) 1px,
            rgba(116, 243, 231, 0.025) 2px,
            transparent 2px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at center,
            transparent 50%,
            rgba(0, 8, 9, 0.16) 78%,
            rgba(0, 0, 0, 0.48) 100%
        );
    mix-blend-mode: multiply;
    opacity: 0.72;
    animation: firstVisitCrtFlicker 2.6s steps(2, end) infinite;
}

.firstVisitCoverSlot::after {
    z-index: 2;
    background:
        linear-gradient(
            180deg,
            transparent 0,
            transparent 44%,
            rgba(176, 255, 245, 0.02) 47%,
            rgba(214, 255, 250, 0.075) 50%,
            rgba(176, 255, 245, 0.018) 53%,
            transparent 57%,
            transparent 100%
        )
        0 -388px / 100% 388px no-repeat;
    mix-blend-mode: screen;
    opacity: 0.58;
    animation: firstVisitCrtRoll 7s linear infinite;
}

.firstVisitContinue {
    position: absolute;
    top: 400px;
    left: 780px;
    width: 123px;
    height: 36px;
    padding: 0 4px 2px;
    overflow: hidden;
    border: 0;
    color: #f2f2ed;
    background:
        url("./first-visit-assets/button-123x34.webp")
        center / 123px 36px no-repeat;
    font-family: "TNOBomb", "WenHanJianZhu", sans-serif;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 2px 1px #000,
        0 0 4px rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.firstVisitContinue:hover {
    filter: brightness(1.16);
}

.firstVisitSignalLayer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.firstVisitSignalBlock {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 737px;
    height: 426px;
    background:
        url("./first-visit-assets/signal-lost-block.webp")
        0 0 / 737px 426px no-repeat;
}

.firstVisitSignalText {
    position: absolute;
    top: 191px;
    left: 137px;
    width: 480px;
    height: 62px;
    background:
        url("./first-visit-assets/signal-lost-cn.webp")
        0 0 / 9600px 62px no-repeat;
    animation: firstVisitSignalFrames 1.333333s steps(20) infinite;
}

.firstVisitNotice[data-language="en"] .firstVisitSignalText {
    background-image: url("./first-visit-assets/signal-lost-en.webp");
}

.firstVisitNotice[data-language="en"] .firstVisitIdentity {
    font-family: "TNOAldrich", sans-serif;
    font-size: 13px;
}

.firstVisitNotice[data-language="en"] .firstVisitMenuLabel,
.firstVisitNotice[data-language="en"] .firstVisitMenuButton,
.firstVisitNotice[data-language="en"] .firstVisitTab,
.firstVisitNotice[data-language="en"] .firstVisitSecondaryAction,
.firstVisitNotice[data-language="en"] .firstVisitContinue {
    font-family: "TNOAldrich", sans-serif;
}

.firstVisitNotice[data-language="en"] .firstVisitTab {
    font-size: 12px;
}

.firstVisitNotice[data-language="en"] .firstVisitMenuLabel {
    font-size: 13px;
}

.firstVisitNotice[data-language="en"] .firstVisitMenuButton {
    font-size: 12px;
}

.firstVisitNotice[data-language="en"] .firstVisitTitle {
    font-size: 17px;
}

.firstVisitNotice[data-language="en"] .firstVisitCopy {
    font-family: "TNOAldrich", sans-serif;
    font-size: 12px;
    line-height: 1.42;
}

.firstVisitNotice[data-language="en"] .firstVisitLead {
    font-family: "TNOAldrich", sans-serif;
    font-size: 15px;
}

.firstVisitLanguageNotice {
    margin-bottom: 20px;
    padding: 11px 13px 3px;
    border-left: 3px solid #d7a06d;
    background:
        linear-gradient(90deg, rgba(113, 66, 39, 0.3), transparent 88%),
        rgba(18, 18, 16, 0.42);
    box-shadow: inset 0 0 0 1px rgba(218, 164, 110, 0.12);
}

.firstVisitNotice[data-language="en"] .firstVisitLanguageNotice .firstVisitLead {
    color: #e7b27f;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.firstVisitCopy .firstVisitLanguageCritical {
    color: #ff6258;
    text-shadow: 0 0 8px rgba(255, 68, 58, 0.28);
}

.firstVisitNotice[data-language="en"] .firstVisitSecondaryAction {
    font-size: 9px;
}

.firstVisitNotice[data-language="en"] .firstVisitContinue {
    font-size: 7px;
}

.firstVisitSignalLayer::after {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 737px;
    height: 426px;
    content: "";
    background:
        repeating-linear-gradient(
            0deg,
            rgba(76, 240, 230, 0.055) 0,
            rgba(76, 240, 230, 0.055) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
    opacity: 0.48;
}

.firstVisitNotice.isSignalLost .firstVisitUi,
.firstVisitNotice.isSignalLost .firstVisitTabs {
    visibility: hidden;
}

.firstVisitNotice.isFading .firstVisitScale {
    opacity: 0;
    filter: saturate(0.55) brightness(1.55);
    transition:
        opacity 500ms linear,
        filter 500ms linear;
}

.firstVisitSrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    margin: -1px;
    white-space: nowrap;
}

@keyframes firstVisitSignalFrames {
    to {
        background-position-x: -9600px;
    }
}

@keyframes firstVisitCrtFlicker {
    0%,
    94% {
        opacity: 0.72;
    }

    95% {
        opacity: 0.63;
    }

    97% {
        opacity: 0.76;
    }

    100% {
        opacity: 0.7;
    }
}

@keyframes firstVisitCrtRoll {
    from {
        background-position-y: -388px;
    }

    to {
        background-position-y: 388px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .firstVisitSignalText {
        animation: none;
    }

    .firstVisitCoverSlot::before,
    .firstVisitCoverSlot::after {
        animation: none;
    }

    .firstVisitNotice.isFading .firstVisitScale {
        transition-duration: 180ms;
    }
}