/* ===== 全局定义 ===== */

* {
    overflow: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

:root {
    /* 强制声明页面只支持浅色模式 */
    color-scheme: light;
}

body {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(240, 248, 255, 0.95);
}

p {
    flex-shrink: 0;
    width: auto;
    height: 6dvmin;
    object-fit: contain;
    object-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    display: block;
    align-self: center;
}

::-webkit-scrollbar {
    width: 1dvmin;
    height: 1dvmin;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    border-radius: 100dvmax;
    background-color: rgb(245, 245, 245);
    box-shadow: inset 0 0 0.5dvmin 0.28dvmin rgb(210, 210, 210);
}

::-webkit-scrollbar-thumb {
    border-radius: 100dvmax;
    background-color: rgb(210, 210, 210);
    box-shadow: inset 0 0 0.48dvmin 0.28dvmin rgb(128, 128, 128);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148, 148, 148);
    box-shadow: inset 0 0 0.4dvmin 0.2dvmin rgb(80, 80, 80);
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
    display: none;
}

.NoDisplay {
    display: none !important;
}

.Lines {
    position: absolute;
    z-index: 0;
    width: 0.5dvmin;
    height: 0.5dvmin;
    background-color: rgb(95, 158, 160);
}

.Paragraph,
.Screen234 > div > div,
.MultipleLines > div,
#print_content > div > div:not(.NotPrintDefault),
#print_content_1_choose > div,
#statistics_results_window > div > div,
#print_content_2_head > div,
#print_content_2_inner > div div,
#grid_data > div div,
#explain_content > div:not(.Lines),
:where(#keyboard_main, #sub_keyboard > div) > div {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 0.6dvmin;
}

:where(
    .Paragraph,
    .Screen234 > div > div,
     #print_content_2_inner > div div,
     #grid_data > div div
) > p:first-child {
    margin-left: 0.45dvmin;
}

:where(
    .Paragraph,
    .Screen234 > div > div,
    .MultipleLines > div,
    #print_content > div > div:not(.NotPrintDefault),
    #statistics_results_window > div > div,
    #print_content_2_inner > div div,
    #grid_data > div div
) > p:last-child {
    margin-right: 0.45dvmin;
}

/* ===== main 窗口样式 ===== */

#main_cover {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
}

#main {
    position: absolute;
    z-index: 0;
    top: 0;
    display: flex;
    overflow: hidden;
    width: 200dvw;
    height: 100dvh;
    transition: left 0.3s ease;
}

#main.Input {
    left: 0;
}

#main:not(.Input) {
    left: -100dvw;
}

#main > div {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100dvw;
    height: 100dvh;
}

/* == input 窗口样式 == */

/* head 部分 */

.HeadNotMain {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: max(7dvw, 10dvmin);
    height: 6.5dvh;
    transition: all 0.15s ease;
    border-radius: 2.5dvmin;
}

.HeadNotMain:hover {
    background-color: rgba(230, 230, 230, 0.6);
    box-shadow: inset 0 0 1.5dvmin 0.8dvmin rgba(105, 105, 105, 0.6);
}

.HeadNotMain:active {
    background-color: rgba(230, 230, 230, 0.7);
    box-shadow: inset 0 0 1.5dvmin 1dvmin rgba(105, 105, 105, 0.8);
}

#head {
    overflow: hidden;
    display: flex;
    width: 100dvw;
    height: 6.5dvh;
    border-radius: 0 0 2.5dvmin 2.5dvmin;
    background-color: rgb(196, 196, 196);
}

#head_setting > p:not(.Horizontal) {
    transform: rotate(90deg);
}

#head_title {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100dvw - max(14dvw, 20dvmin));
    height: 6.5dvh;
    transition: all 0.24s ease;
}

#head_title:active {
    transform: scale(0.93);
}

#head_inputs {
    width: 85.4dvw;
    height: 6.5dvh;
    margin-left: 0.6dvw;
}

#head_explain > p {
    transition: all 0.27s ease;
}

#head_explain:not(.ExplainNotShow) > p {
    transform: scale(0.82);
}

._ship_.ShipLeft {
    left: 100dvw;
    transform: scaleX(-1);
}

._ship_:not(.ShipLeft) {
    left: max(-5dvh, -7.79dvmin);
}

/* screen_title 部分 */

#screen_title {
    width: 100dvw;
    height: 6.5dvh;
    border-bottom: 0.5dvmin solid rgb(95, 158, 160);
}

#screen_title > div:not(.Paragraph) {
    width: 99.55dvw;
    margin-left: 0.45dvw;
}

#screen_title p.Superscript {
    margin-left: 0;
    transform: scale(0.66);
    transform-origin: top;
}

#title_mode_2_1 {
    display: flex;
    align-items: center;
    gap: 1dvmin;
}

#back_btn {
    width: min(7.5dvh, 12dvmin);
    height: min(4.5dvh, 7.2dvmin);
    margin-left: 0.5dvw;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#back_btn:hover {
    transform: translateX(-0.4dvmin);
}

#back_btn rect {
    transition: opacity 0.3s ease;
}

#back_btn:hover rect {
    opacity: 0.18;
}

#back_btn path {
    transition: transform 0.3s ease;
}

#back_btn:hover path {
    transform: translateX(-0.3dvmin);
}

/* screen 部分 */

.ScreenMain {
    width: 100dvw;
    height: 28.5dvh;
}

.ScreenNoDisplay {
    transform: scale(0);
    opacity: 0;
}

.ScreenInputsOn {
    background-color: rgb(220, 245, 220);
}

/* screen 部分-part 0 */

#screen_0_display {
    width: 100dvw;
    height: min(24dvmin, 16dvh);
    margin-top: calc(14.25dvh - min(12dvmin, 8dvh));
}

#screen_0_display > div {
    width: 99.5dvw;
    margin-left: 0.5dvw;
    height: min(12dvmin, 8dvh);
}

/* screen 部分-part 1 */

#screen_1 > div.Lines {
    z-index: 1;
    height: 28.5dvh;
}

#screen_1 > div.Lines:first-child {
    left: 10dvw;
}

#screen_1 > div.Lines:nth-child(2) {
    left: 54.5dvw;
}

#grid_top {
    display: flex;
    width: 100dvw;
    height: 6dvmin;
}

#grid_top > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(45dvw - 1dvmin);
    height: 6dvmin;
    margin-left: 0.5dvmin;
}

#grid_top > div:first-child {
    width: 10dvw;
    margin-left: 0;
}

.GridOn {
    border-radius: 2.5dvmin;
    background-color: rgb(220, 245, 220);
    box-shadow: inset 0 0 1dvmin 0.8dvmin rgba(135, 135, 135, 0.5);
}

#grid_data {
    width: 100dvw;
    height: calc(28.5dvh - 6dvmin);
}

#grid_data div {
    overflow: hidden;
}

#grid_data > div {
    display: flex;
    width: 99dvw;
    height: max(calc(7.13dvh - 1.5dvmin), 7.5dvmin);
}

#grid_data > div > div {
    display: flex;
    align-items: center;
    height: max(calc(7.13dvh - 1.5dvmin), 7.5dvmin);;
    transition: all 0.16s ease;
}

#grid_data > div > div:first-child {
    align-items: center;
    justify-content: center;
    width: 10dvw;
}

#grid_data > div > div:first-child > div {
    display: flex;
    align-items: center;
    height: max(calc(7.13dvh - 1.5dvmin), 7.5dvmin);
}

#grid_data > div > div:nth-last-child(-n+2) {
    justify-content: left;
    width: calc(45dvw - 1dvmin);
    margin-left: 0.5dvmin;
}

#grid_data > div > div:nth-last-child(-n+2):not(.GridOn):hover {
    border-radius: 2.5dvmin;
    background-color: rgb(220, 225, 220);
    box-shadow: inset 0 0 1dvmin 0.8dvmin rgba(211, 211, 211, 0.8);
}

#grid_data > div > div:nth-last-child(-n+2):not(.GridOn):active {
    border-radius: 2.5dvmin;
    background-color: rgb(220, 235, 220);
    box-shadow: inset 0 0 1dvmin 0.8dvmin rgba(211, 211, 211, 0.8);
}

/* screen 部分-part 2 到 part 4 */

.Screen234 {
    position: absolute;
    z-index: 0;
    top: 13dvh;
    left: 0;
    display: grid;
    transition: all 0.28s ease;
    grid-gap: 0;
    grid-template-columns: 100dvw;
    grid-template-rows: repeat(2, 11dvh);
}

.Screen234 > div {
    display: flex;
    width: 84dvw;
    height: 8dvh;
    margin: auto;
    transition: all 0.18s ease;
    border-radius: 2.5dvmin;
    box-shadow: inset 0 0 1dvmin 0.8dvmin rgba(135, 135, 135, 0.5);
}

.Screen234 > div:not(.ScreenInputsOn) {
    background-color: rgba(211, 211, 211, 0.8);
}

.Screen234 > div:not(.ScreenInputsOn):hover {
    transform: scale(1.022);
    background-color: rgb(220, 225, 220);
}

.Screen234 > div:not(.ScreenInputsOn):active {
    transform: scale(1);
    background-color: rgb(220, 235, 220);
}

.Screen234 > div > div:first-child {
    justify-content: right;
}

.Screen234 > div > div:nth-child(2) {
    padding-left: 1dvw;
}

#screen_2_0,
#screen_4 {
    height: 25.25dvh;
    margin-top: 3.25dvh;
}

#screen_2_0 > div > div:first-child {
    width: max(14dvmin, 9.5dvw);
}

#screen_2_0 > div > div:nth-child(2) {
    width: calc(85dvw - max(14dvmin, 9.5dvw));
}

#screen_2_1 {
    grid-template-rows: repeat(3, 9.5dvh);
}

#screen_2_1 > div > div:first-child {
    width: max(20dvmin, 13dvw);
}

#screen_2_1 > div > div:nth-child(2) {
    width: calc(85dvw - max(20dvmin, 13dvw));
}

#screen_3 {
    grid-template-columns: repeat(2, 50dvw);
    grid-template-rows: repeat(3, 9.5dvh);
}

#screen_3 > div {
    width: 48dvw;
}

:where(#screen_3, #screen_4) > div > div:first-child {
    width: max(8.5dvmin, 4dvw);
}

#screen_3 > div > div:nth-child(2) {
    width: calc(48dvw - max(8.5dvmin, 4dvw));
}

#screen_4 > div > div:nth-child(2) {
    width: calc(85dvw - max(8.5dvmin, 4dvw));
}

/* input 部分 */

#input {
    position: absolute;
    z-index: 0;
    top: 41.5dvh;
    left: 0;
    width: 100dvw;
    height: 8dvh;
    border-top: 0.5dvmin solid rgb(95, 158, 160);
    border-bottom: 0.5dvmin solid rgb(95, 158, 160);
    background-color: rgba(237, 242, 250, 0.75);
    box-shadow: inset 0 0 6dvmin 0.1dvmin rgb(255, 248, 220);
}

@keyframes flicker {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1.0;
    }
}

#cursor {
    flex-shrink: 0;
    width: 0.6dvmin;
    height: 6dvh;
    margin: auto 0.35dvmin auto;
    animation: flicker 1s linear infinite;
    border-radius: 100dvmax;
    background-color: rgb(184, 91, 110);
}

/* == keyboard 部分 == */

.KeyboardStyle1 {
    background-color: rgba(240, 248, 255, 0.95);
}

.KeyboardStyle2 {
    background-color: rgb(245, 255, 250);
}

.KeyboardStyle3 {
    background-color: rgb(255, 245, 240);
}

.KeyboardCover {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    height: 43.5dvh;
}

:where(
    #keyboard_cover,
    #keyboard_cover_ForMode1
):not(.KeyboardCover) {
    display: none;
}

:where(
    #keyboard_main,
    #sub_keyboard_ForMode1,
    #sub_keyboard > div
) > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.75dvh;
    transition: all 0.12s;
    border-radius: 3dvmin;
    box-shadow: inset 0 0 1dvmin 0.4dvmin rgba(13, 48, 2, 0.95);
}

:where(
    #keyboard_main,
    #sub_keyboard_ForMode1,
    #sub_keyboard > div
) > div:hover {
    transform: translateY(-0.1dvmin);
    opacity: 0.75;
}

:where(
    #keyboard_main,
    #sub_keyboard_ForMode1,
    #sub_keyboard > div
) > div:active {
    transform: translateY(0.15dvmin) scale(0.98);
    box-shadow: inset 0 0 1.5dvmin 0.5dvmin rgb(0, 0, 0);
}

/* sub_keyboard 部分 */

#sub_keyboard,
#sub_keyboard > div > div {
    overflow: hidden;
}

#sub_keyboard > div,
#sub_keyboard_ForMode1 {
    overflow: hidden;
    display: grid;
    transition: all 0.25s ease;
    border-radius: 3dvmin;
    background-color: rgba(242, 242, 242, 0.44);
    box-shadow: 0 0 2.8dvmin 1.3dvmin rgb(105, 105, 105);
    grid-template-rows: repeat(3, 7.25dvh);
    place-items: center;
    backdrop-filter: blur(8px);
}

#sub_keyboard_ForMode1 {
    position: absolute;
    z-index: 2;
    top: 56.25dvh;
    height: min(calc(17dvh + 1dvmin), 29dvmin);
    padding: 0.5dvmin 0 0 0.5dvmin;
    background-color: rgba(255, 255, 255, 0.13);
    grid-template-rows: repeat(2, min(8.5dvh, 14dvmin));
}

#sub_keyboard_ForMode1 > div {
    height: min(7dvh, 12dvmin);
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0.4dvmin 1.5dvmin rgba(0, 0, 0, 0.2);
}

#sub_keyboard_ForMode1 > div:hover {
    background-color: rgba(240, 252, 240, 0.9);
}

#sub_keyboard_ForMode1 > div:active {
    transform: scale(0.975);
    background-color: rgb(220, 245, 220);
    box-shadow: none;
}

#sub_keyboard_ForMode1.NotShow {
    top: calc(56.25dvh - min(calc(8.5dvh + 0.5dvmin), 14.5dvmin));
    transform: scale(0);
    opacity: 0.25;
}

/* keyboard_top 部分 */

#keyboard_top {
    overflow: hidden;
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    height: 6.5dvh;
    border-radius: 3dvmin;
    background-color: rgba(215, 215, 215, 0.7);
    box-shadow: inset 0 0 1.4dvmin 0.4dvmin rgba(135, 135, 135, 0.4);
}

#keyboard_top > div {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.5dvh;
    transition: all 0.18s;
    border-radius: 3dvmin;
}

#keyboard_top > div:not(.Ordinary, #keyboard_top_more) {
    background-color: rgba(162, 196, 162, 0.9);
    box-shadow: inset 0 0 1dvmin 1.5dvmin rgb(149, 175, 149);
}

#keyboard_top > div:hover {
    box-shadow: inset 0 0 1dvmin 0.3dvmin rgba(105, 105, 105, 0.8);
}

#keyboard_top > div:active {
    box-shadow: inset 0 0 2dvmin 0.4dvmin rgba(105, 105, 105, 0.8);
}

#keyboard_top > div.Ordinary:not(#keyboard_top_more):hover {
    background-color: rgba(230, 237, 230, 0.7);
}

#keyboard_top > div.Ordinary:not(#keyboard_top_more):active {
    background-color: rgba(225, 235, 225, 0.9);
}

#keyboard_top > div:nth-child(5) > p {
    transform: rotate(180deg);
}

#keyboard_top:not(.ForMode1) > #keyboard_top_more {
    display: none;
}

#keyboard_top_more {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

#sort_svg {
    overflow: visible;
    width: 81%;
    height: 81%;
}

.ArrowPath {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: scaleY(-1);
    transform-origin: center;
    fill: none;
    stroke: rgb(102, 102, 102);

    /* 核心动画设置 */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    /* 默认状态：scaleY(-1) -> 显示为 >< (收缩/翻转态) */
    transform-box: fill-box;
}

#keyboard_top_more:active #sort_svg {
    transition: transform 0.1s;
    transform: scale(0.9);
}

#keyboard_top_more.Ordinary .ArrowPath {
    transform: scaleY(1);
}

/* keyboard_main 部分 */

#keyboard_main {
    overflow: hidden;
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    display: grid;
    height: 43.75dvh;
    background-image: linear-gradient(to top, rgb(196, 196, 196), transparent);
    grid-template-rows: repeat(6, calc(175dvh / 24));
    place-items: center;
}

#keyboard_main > div {
    overflow: hidden;
    height: calc(163dvh / 24);
}

/* keyboard 媒体查询部分 */

@media (max-width: 160dvh) {
    .KeyboardCover {
        width: 100dvw;
    }

    #sub_keyboard > div {
        position: absolute;
        z-index: 2;
        top: 56.25dvh;
        width: calc(59.7dvw + 0.5dvmin);
        height: calc(21.75dvh + 0.5dvmin);
        padding: 0.25dvmin;
        grid-template-columns: repeat(3, 19.9dvw);
    }

    #sub_keyboard > div:first-child {
        left: calc(0.25dvw - 0.25dvmin);
    }

    #sub_keyboard > div:last-child {
        left: calc(20.15dvw - 0.25dvmin);
    }

    #sub_keyboard > div.NotShow {
        top: calc(45.375dvh - 0.25dvmin);
        transform: scale(0);
        opacity: 0.25;
    }

    #sub_keyboard > div > div {
        width: 19.4dvw;
    }

    #sub_keyboard_ForMode1 {
        width: max(28dvw, 35dvmin);
        left: calc(63.95dvw - max(14dvw, 17.5dvmin));
        grid-template-columns: calc(max(28dvw, 35dvmin) - 1dvmin);
    }

    #sub_keyboard_ForMode1 > div {
        width: max(25dvw, 32dvmin);
    }

    #keyboard_top {
        top: 49.75dvh;
        right: 0;
        width: 99.5dvw;
        margin: 0 0.25dvw 0;
    }

    #keyboard_top > div {
        width: 19.9dvw;
    }

    #keyboard_top > div:first-child {
        width: calc(19.9dvw - 0.5dvmin);
        margin-right: 0.5dvmin;
    }

    #keyboard_top.ForMode1 > div:nth-last-child(-n+2) {
        width: 15.9dvw;
    }

    #keyboard_top.ForMode1 > #keyboard_top_more {
        width: 8dvw;
    }

    #keyboard_main > div {
        width: 19.5dvw;
    }

    #keyboard_main {
        width: 100dvw;
        grid-template-columns: repeat(5, 20dvw);
    }
}

@media (min-width: 160dvh) {
    #keyboard_cover,
    #keyboard_top > div:where(:nth-child(2), div:nth-child(3)) {
        display: none !important;
    }

    .KeyboardCover {
        width: 62.5dvw;
    }

    #sub_keyboard {
        position: absolute;
        z-index: 0;
        top: 49.5dvh;
        left: 0;
        width: 37.5dvw;
        height: 50.5dvh;
        border-right: 0.5dvmin solid rgb(95, 158, 160);
        background-color: rgb(232, 232, 232);
    }

    #sub_keyboard > div {
        position: static;
        width: calc(37.5dvw - 0.5dvmin);
        height: 21.75dvh;
        padding: 0;
        background-color: transparent;
        box-shadow: 0 0 0 0 transparent;
        grid-template-columns: repeat(3, calc(12.5dvw - 0.5dvmin / 3));
    }

    #sub_keyboard > div:first-child {
        margin-top: calc(29dvh / 12);
    }

    #sub_keyboard > div:last-child {
        margin-top: calc(13dvh / 6);
    }

    #sub_keyboard > div.NotShow {
        transform: scale(1);
        opacity: 1;
    }

    #sub_keyboard > div > div {
        width: 12.125dvw;
    }

    #sub_keyboard_ForMode1 {
        left: calc(30.15625dvw + calc(62dvw / 3));
        width: 21dvw;
        grid-template-columns: calc(21dvw - 1dvmin);
    }

    #sub_keyboard_ForMode1 > div {
        width: 19dvw;
    }

    #keyboard_top {
        top: 49.75dvh;
        right: 0.15625dvw;
        width: 62.1875dvw;
        margin: 0;
    }

    #keyboard_top > div {
        width: calc(62dvw / 3);
    }

    #keyboard_top.ForMode1 > div:nth-last-child(-n+2) {
        width: calc(53dvw / 3);
    }

    #keyboard_top.ForMode1 > #keyboard_top_more {
        width: 6dvw;
    }

    #keyboard_main > div {
        width: 12.1875dvw;
    }

    #keyboard_main {
        width: 62.5dvw;
        grid-template-columns: repeat(5, 12.5dvw);
    }
}

/* == print 窗口样式 == */

#main_print {
    background-color: rgb(250, 250, 250);
}

/* 加载动画部分 */

#load_cover {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

#load {
    width: max(32dvw, 45dvmin);
    height: calc(min(12dvmin, 7dvh) + 37dvmin + 2dvh);
    border-radius: 3dvmin;
    /* 启用背景色，使用定义的局部变量 */
    background-color: hsla(var(--hue), 10%, 90%, 0.8);
    /* 添加卡片阴影，增加层次感 */
    box-shadow: 0 4dvmin 20dvmin rgba(0, 0, 0, 0.2);
    /* 局部定义变量 */
    --hue: 223;
}

#load > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

#loading {
    height: 10dvmin;
}

#load_cancel {
    width: 60% !important;
    margin-top: 1dvh !important;
    background-color: rgb(240, 100, 100) !important;
}

#load_box {
    /* 容器尺寸定义 */
    display: flex;
    align-items: center;

    /* 确保 SVG 居中 */
    justify-content: center;
    width: 25dvmin;
    height: 25dvmin;
}

.pl,
.plWorm {
    /* 动画通用设置 */
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.pl {
    /* SVG 容器 */
    width: 60%;
    height: 60%;
    animation-name: bump;
    animation-timing-function: linear;
}

.plRing {
    /* 背景圆环 */
    transition: stroke 0.3s;
    stroke: hsla(var(--hue), 10%, 10%, 0.1);
}

.plWorm {
    /* 蠕虫线条动画 */
    animation-name: worm;
    animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
}

@keyframes bump {
    /* 关键帧动画定义 */
    from,
    42%,
    46%,
    51%,
    55%,
    59%,
    63%,
    67%,
    71%,
    74%,
    78%,
    81%,
    85%,
    88%,
    92%,
    to {
        transform: translate(0, 0);
    }
    44% {
        transform: translate(1.33%, 6.75%);
    }
    53% {
        transform: translate(-16.67%, -0.54%);
    }
    61% {
        transform: translate(3.66%, -2.46%);
    }
    69% {
        transform: translate(-0.59%, 15.27%);
    }
    76% {
        transform: translate(-1.92%, -4.68%);
    }
    83% {
        transform: translate(9.38%, 0.96%);
    }
    90% {
        transform: translate(-4.55%, 1.98%);
    }
}

@keyframes worm {
    /* 关键帧动画定义 */
    from {
        stroke-dashoffset: 10;
    }
    25% {
        stroke-dashoffset: 295;
    }
    to {
        stroke-dashoffset: 1165;
    }
}

/* print_title 和 print_close */

#print_title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100dvw;
    height: 6.5dvh;
}

#print_close,
#load_cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(25dvw, 35dvmin);
    height: min(12dvmin, 7dvh);
    margin: 0.5dvh auto auto;
    transition: all 0.2s ease;
    border-radius: 2.5dvmin;
    background-color: rgba(105, 145, 105, 0.8);
    box-shadow: inset 0 0 0.5dvmin 0.4dvmin rgb(250, 250, 250);
}

#print_close:hover,
#load_cancel:hover {
    opacity: 0.9;
    background-color: rgb(90, 140, 90);
    box-shadow: inset 0 0 0.5dvmin 0.6dvmin rgb(250, 250, 250);
}

#print_close:active,
#load_cancel:active {
    transform: scale(0.975);
    background-color: rgb(90, 140, 90);
    box-shadow: inset 0 0 0.5dvmin 0.6dvmin rgb(250, 250, 250);
}

/* print_content 部分 */

#print_content {
    width: 99dvw;
    height: calc(92.5dvh - min(11dvmin, 7dvh));
    margin-left: 1dvw;
}

#print_content > div {
    width: 99dvw;
    height: calc(92.5dvh - min(11dvmin, 7dvh));
}

#print_content > div > div:not(.NotPrintDefault),
#statistics_results_window > div > div {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 98dvw;
    height: min(7.5dvh, 9dvmin);
}

#print_content > div:not(#print_content_2) div > p:first-of-type {
    margin-left: 0.85dvmin;
}

#print_content > div:not(#print_content_2) div > p:last-of-type {
    margin-right: 0.85dvmin;
}

.MultipleLines {
    width: 98dvw;
}

.MultipleLines > div {
    width: max-content;
    height: min(7.5dvh, 9dvmin);
}

#print_content_1 > div:nth-child(7),
#statistics_results_window > div > div:nth-child(4n + 1),
#print_content_3 > div:nth-child(4n+2) {
    border-radius: 1.5dvmin 1.5dvmin 0 0;
    background-color: rgba(226, 226, 226, 0.8);
    margin-top: 1dvmin;
}

#print_content_1 > div:nth-child(8),
#statistics_results_window > div > div:nth-child(4n + 2),
#print_content_3 > div:nth-child(4n+3) {
    border-radius: 0 0 1.5dvmin 1.5dvmin;
    background-color: rgba(226, 226, 226, 0.8);
}

#print_content_1_cover {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
}

#print_content_1_choose {
    width: max(99dvmin, 80dvw);
    height: calc(min(60dvh, 103dvmin) + min(8dvh, 12dvmin));
    padding-top: 2dvmin;
    background-color: rgba(245, 245, 245, 0.75);
    backdrop-filter: blur(7px);
    box-shadow: inset 0 0 2dvmin 1dvmin rgb(188, 188, 188);
    border-radius: 2.5dvmin 2.5dvmin 0 0;
    position: absolute;
    left: min(calc(50dvw - 49.5dvmin), 10dvw);
    z-index: 2;
    transition: all 0.3s ease;
    display: grid;
    grid-gap: 0;
    grid-template-columns: max(99dvmin, 80dvw);
    grid-template-rows: min(8dvh, 12dvmin) repeat(7, min(14dvmin, 8dvh));
}

#print_content_1_choose.PrintContent1ChooseOff {
    top: 100dvh;
}

#print_content_1_choose:not(.PrintContent1ChooseOff) {
    top: calc(100dvh - calc(min(60dvh, 103dvmin) + min(8dvh, 12dvmin)));
}

#print_content_1_choose div {
    width: max(85dvmin, 68dvw);
    height: min(12dvmin, 7dvh);
    margin: auto;
    border-radius: 2.5dvmin;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Print1ChooseOn {
    background-color: rgb(162, 196, 162);
    box-shadow: inset 0 0 1dvmin 1.5dvmin rgb(149, 175, 149);
    transition: all 0.45s ease;
}

#print_content_1_choose > div:not(
    :first-child,
    .Print1ChooseOn
) {
    background-color: rgb(211, 211, 211);
    box-shadow: inset 0 0 1dvmin 1dvmin rgb(188, 188, 188);
    transition: all 0.45s ease;
}

#print_content_1_choose > div:not(
    :first-child,
    .Print1ChooseOn
):hover {
    background-color: rgb(182, 192, 182);
}

#print_content_1_choose > div:not(
    :first-child,
    .Print1ChooseOn
):active {
    background-color: rgb(182, 192, 182);
}

#print_1_0_choose {
    height: min(8dvh, 11dvmin) !important;
    border-radius: 2dvmin;
    background-image: linear-gradient(to right, rgba(211, 211, 211, 0.8), transparent);
    transition: all 0.23s ease;
}

#print_1_0_choose:hover {
    background-color: rgba(211, 211, 211, 0.8);
    box-shadow: inset 0 0 1dvmin 0.5dvmin rgba(211, 211, 211, 0.8);
}

#print_1_0_choose:active {
    background-color: rgba(211, 211, 211, 0.8);
    box-shadow: inset 0 0 1dvmin 0.5dvmin rgb(250, 250, 250);
}

#export {
    width: 98dvw;
    height: min(13dvmin, 10dvh);
    border-bottom: 0.5dvmin solid rgb(188, 188, 188);
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(2, 49dvw);
    grid-template-rows: min(12.5dvmin, 9.5dvh);
}

#export div {
    width: 45dvw;
    height: min(9.1dvmin, 7dvh);
    margin: auto;
    background-color: rgba(105, 145, 105, 0.8);
    border-radius: 3dvmin;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease;
}

#export div:hover {
    opacity: 0.9;
    background-color: rgb(90, 140, 90);
    box-shadow: inset 0 0 0.4dvmin 0.3dvmin rgb(250, 250, 250);
}

#export div:active {
    transform: translateY(0.3dvmin);
    background-color: rgb(90, 140, 90);
    box-shadow: inset 0 0 0.4dvmin 0.3dvmin rgb(250, 250, 250);
}

#statistics_results_top {
    width: 98dvw;
    height: min(calc(8dvh + 0.5dvmin), 11.5dvmin);
    margin-top: 1dvmin;
    display: flex;
    justify-content: center;
    position: relative;
}

:where(
    #statistics_results_top.ResultX > div:not(:first-child),
    #statistics_results_top.ResultY > div:not(:nth-child(2)),
    #statistics_results_top.ResultXY > div:not(:nth-child(3))
):not(.Lines):hover {
    background-color: rgb(242, 242, 242);
}

#statistics_results_top > div:not(.Lines) {
    height: min(8dvh, 11dvmin);
    width: calc(98dvw / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

#statistics_results_top > div.Lines {
    width: calc(98dvw / 3);
    position: absolute;
    bottom: 0;
    border-radius: 100dvmax;
    transition: left 0.3s ease;
}

#statistics_results_top.ResultX > div.Lines {
    left: 0;
}

#statistics_results_top.ResultY > div.Lines {
    left: calc(98dvw / 3);
}

#statistics_results_top.ResultXY > div.Lines {
    left: calc(196dvw / 3);
}

.SelectBtn {
    position: relative;
    overflow: hidden; /* 核心：裁剪溢出的波纹 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 外观样式 */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 波纹元素样式 */
span.Ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    pointer-events: none; /* 核心：确保不阻挡交互 */
    transform: scale(0);

    /* 进入动画：扩散 */
    animation: RippleFill 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 离开状态：褪色 */
span.Ripple.IsFadingOut {
    animation: RippleFadeOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes RippleFill {
    to {
        transform: scale(4);
        opacity: 1;
    }
}

@keyframes RippleFadeOut {
    0% {
        opacity: 1;
        transform: scale(4);
    }
    100% {
        opacity: 0;
        transform: scale(4.2);
    }
}

#statistics_results {
    width: 98dvw;
    margin-top: 1dvmin;
    overflow: hidden;
}

#statistics_results_window {
    width: 296dvw;
    display: flex;
    gap: 1dvw;
    position: relative;
    transition: transform 0.3s ease;
}

#statistics_results_window > div {
    width: 98dvw;
}

#statistics_results_window.ResultX {
    transform: translateX(0);
}

#statistics_results_window.ResultY {
    transform: translateX(-99dvw);
}

#statistics_results_window.ResultXY {
    transform: translateX(-198dvw);
}

#print_content_2 div.Lines {
    top: 6.5dvh;
    height: calc(92.5dvh - min(11dvmin, 7dvh));
    border-radius: 100dvmax;
}

#print_grid_line_1 {
    left: calc((101dvw - 1dvmin) / 3);
}

#print_content_2.TwoFunc #print_grid_line_2 {
    left: calc((199dvw - 0.5dvmin) / 3);
}

#print_content_2:not(.TwoFunc) #print_grid_line_2 {
    display: none;
}

#print_content_2.TwoFunc #print_grid_line_error {
    display: none;
}

#print_content_2:not(.TwoFunc) #print_grid_line_error {
    top: 7.5dvh;
    height: calc(85dvh - min(11dvmin, 7dvh));
    left: calc((199dvw - 0.5dvmin) / 3);
}

#print_content_2.TwoFunc :is(
    #print_content_2_head,
    #print_content_2_inner > div
) {
    grid-template-columns: repeat(3, calc((98dvw - 1dvmin) / 3));
}

#print_content_2:not(.TwoFunc) :is(
    #print_content_2_head,
    #print_content_2_inner > div
) {
    grid-template-columns: calc((98dvw - 1dvmin) / 3) calc((196dvw - 0.5dvmin) / 3);
}

#print_content_2:not(.TwoFunc) :is(
    #print_content_2_head > div:last-child,
    #print_content_2_inner > div > div:last-child
) {
    display: none;
}

#print_content_2_head,
#print_content_2_inner > div {
    width: 98dvw;
    display: grid;
    grid-gap: 0.5dvmin;
}

#print_content_2_head {
    height: 7dvh;
    grid-template-rows: 7dvh;
}

#print_content_2_head > div {
    justify-content: center;
}

#print_content_2_inner {
    width: 99dvw;
    height: calc(85.5dvh - min(11dvmin, 7dvh));
}

#print_content_2_inner > div {
    grid-template-rows: min(7.5dvh, 9dvmin);
}

#print_content_2_inner > div > div {
    display: flex;
    justify-content: center;
}

#print_content_2_inner > div > div > div {
    height: min(7.5dvh, 9dvmin);
}

#print_content_2_inner > div:nth-child(2n+1):not(
    :first-child:nth-last-child(4),
    :first-child:nth-last-child(3),
    :first-child:nth-last-child(2),
    :first-child:last-child,
    :nth-child(3):nth-last-child(2),
    :nth-child(3):last-child
),
#print_content_4_content_2 > div:nth-last-child(2n):not(
    :first-child:nth-last-child(4),
    :first-child:nth-last-child(3),
    :first-child:nth-last-child(2),
    :first-child:last-child,
    :nth-child(2):nth-last-child(2),
    :nth-child(3):nth-last-child(2)
) {
    border-radius: 1.5dvmin;
    background: rgba(226, 226, 226, 0.8);
    margin-top: 1dvmin;
}

#print_content_2_error {
    width: 100dvw;
    height: calc(92.5dvh - min(11dvmin, 7dvh));
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 6.5dvh;
    left: 0;
    z-index: 1;
}

#number_table_error {
    width: 47dvw;
    height: min(10dvh, 16dvmin);
    background-color: rgb(250, 250, 250);
    backdrop-filter: blur(5px);
    border: 0.5dvmin solid rgb(95, 158, 160);
    border-radius: 2dvmin;
    display: flex;
    justify-content: center;
    align-items: center;
}

#print_omit {
    margin-top: 0.8dvmin;
}

/* ===== others 窗口样式 ===== */

#others {
    width: 0;
    height: 0;
}

/* == setting 窗口样式 == */

#setting {
    position: absolute;
    z-index: 4;
    top: 6.5dvh;
    overflow: hidden;
    width: min(65dvw, 90dvmin);
    height: 93.5dvh;
    transition: all 0.3s ease;
    border-radius: 0 2.5dvmin 2.5dvmin 0;
    background-color: rgba(255, 250, 250, 0.77);
    backdrop-filter: blur(6px);
}

.SettingNotShow {
    left: max(-65dvw, -90dvmin);
}

#setting:not(.SettingNotShow) {
    left: 0;
    box-shadow: 0 0 2dvmin 1dvmin rgb(211, 211, 211);
}

/* setting 开关部分 */

#switch_container {
    /* 核心尺寸计算变量 (--h):
       1. 优先尝试使用 6dvh (基于高度)。
       2. 但必须满足 宽度(2h) <= 15dvw，即 h <= 7.5dvw。
       3. 取两者中的较小值。
    */
    position: relative;

    overflow: hidden;
    width: calc(var(--h) * 2); /* 宽度恒为高度的2倍 */
    height: var(--h); /* 高度 */

    transition: background-color 0.4s ease;

    /* 阴影大小基于高度计算 (系数约为 0.075) */
    border-radius: var(--h); /* 圆角为高度值，保持胶囊状 */

    background-color: rgb(238, 242, 245);
    box-shadow: inset calc(var(--h) * 0.075) calc(var(--h) * 0.075) calc(var(--h) * 0.15) rgb(203, 209, 216),
    inset calc(var(--h) * -0.075) calc(var(--h) * -0.075) calc(var(--h) * 0.15) rgb(255, 255, 255);

    /* 防止点击时的高亮背景 */
    --h: min(6dvh, 7.5dvw);
    -webkit-tap-highlight-color: transparent;
}

#switch_knob {
    /* 圆形按钮 (Knob) */
    position: absolute;
    /* 边距基于高度计算 (系数 0.1) */
    top: calc(var(--h) * 0.1);
    left: calc(var(--h) * 0.1);

    /* 按钮尺寸基于高度计算 (系数 0.8) */
    display: flex;
    align-items: center;

    justify-content: center;
    width: calc(var(--h) * 0.8);

    /* 凸起阴影 */
    height: calc(var(--h) * 0.8);

    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background-color 0.4s,
    box-shadow 0.4s;

    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    box-shadow: calc(var(--h) * 0.05) calc(var(--h) * 0.05) calc(var(--h) * 0.125) rgb(203, 209, 216),
    calc(var(--h) * -0.05) calc(var(--h) * -0.05) calc(var(--h) * 0.125) rgb(255, 255, 255);
}

.SwitchIcon {
    /* SVG 图标 */
    /* 图标尺寸基于高度计算 (系数 0.4) */
    position: absolute;
    width: calc(var(--h) * 0.4);
    height: calc(var(--h) * 0.4);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.IconOff {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    stroke: rgb(113, 128, 150);
}

.IconOn {
    transform: scale(0.5) rotate(-45deg);
    opacity: 0;
    stroke: rgb(255, 255, 255);
}

#switch_container.Active {
    background-color: rgb(241, 248, 241);
    box-shadow: inset calc(var(--h) * 0.075) calc(var(--h) * 0.075) calc(var(--h) * 0.15) rgb(209, 218, 209),
    inset calc(var(--h) * -0.075) calc(var(--h) * -0.075) calc(var(--h) * 0.15) rgb(255, 255, 255);
}

#switch_container.Active #switch_knob {
    /* 移动距离正好等于 1倍高度 */
    transform: translateX(var(--h));
    background-color: rgb(162, 196, 162);
    /* 发光范围 */
    box-shadow: 0 0 calc(var(--h) * 0.25) rgb(149, 175, 149);
}

#switch_container.Active .IconOff {
    transform: scale(0.5) rotate(45deg);
    opacity: 0;
}

#switch_container.Active .IconOn {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* setting 标题和选择部分 */

.SettingTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(65dvw, 90dvmin);
    height: 6dvh;
}

.SelectionOn {
    width: min(59dvw, 83dvmin);
    background-color: rgb(162, 196, 162);
    box-shadow: inset 0 0 1dvmin 1.5dvmin rgb(149, 175, 149);
}

.SettingSelection {
    display: grid;
    overflow: hidden;
    width: min(65dvw, 90dvmin);
    border-bottom: 0.5dvmin solid rgba(145, 145, 145, 0.85);
    grid-gap: 0;
    grid-template-columns: min(65dvw, 90dvmin);
}

.SettingSelection > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.5dvh;
    margin: auto 0;
    transition: all 0.4s ease;
    border-radius: 0 3dvmin 3dvmin 0;
}

.SettingSelection > div:not(.SelectionOn) {
    width: min(46dvw, 64.7dvmin);
    background-color: rgb(211, 211, 211);
    box-shadow: inset 0 0 1dvmin 1dvmin rgb(188, 188, 188);
}

.SettingSelection > div:not(.SelectionOn):hover {
    width: min(49dvw, 68.5dvmin);
    height: 9dvh;
    background-color: rgb(182, 192, 182);
}

#setting_selection_mode {
    height: calc(47.5dvh + 0.5dvmin);
    grid-template-rows: repeat(5, 9.5dvh);
}

#setting_selection_print {
    height: calc(19dvh + 0.5dvmin);
    grid-template-rows: repeat(2, 9.5dvh);
}

#setting_acc_control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(65dvw, 90dvmin);
    height: calc(7.5dvh + 0.5dvmin);
    border-bottom: 0.5dvmin solid rgba(145, 145, 145, 0.85);
    background-color: rgba(255, 255, 255, 0.9);
}

#setting_acc_control > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

#setting_acc_control > div:first-child {
    width: min(47dvw, 66.1dvmin);
}

#setting_acc_control > div:last-child {
    justify-content: left;
    width: min(18dvw, 23.9dvmin);
}

/* setting_info_show 部分 */

#setting_info_show {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(65dvw, 90dvmin);
    height: calc(7.5dvh - 1.5dvmin);
}

/* == explain 窗口样式 == */

#explain {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    width: min(90dvw, 100dvmin);
    height: 80dvh;
    transition: all 0.5s ease;
    border-radius: 4dvmin;
}

#explain.ExplainNotShow {
    top: -36.75dvh;
    left: calc(calc(100dvw - max(3.5dvw, 5dvmin)) - min(45dvw, 50dvmin));
    transform: scale(0);
    opacity: 0.86;
}

#explain:not(.ExplainNotShow) {
    top: 10dvh;
    left: calc(50dvw - min(45dvw, 50dvmin));
    background-color: rgba(253, 248, 239, 0.78);
    box-shadow: 0 0 2dvmin 1dvmin rgb(211, 211, 211);
    backdrop-filter: blur(6px);
}

/* explain_top 部分 */

#explain_top {
    display: flex;
    align-items: center;
    justify-content: left;
    width: min(90dvw, 100dvmin);
    height: 7dvh;
}

#explain_title_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(min(90dvw, 100dvmin) - 8dvw);
    height: 7dvh;
}

#explain_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8dvw;
    height: 7dvh;
    transition: all 0.3s ease;
}

#explain_close:hover,
#explain_close:active {
    transition-property: none;
    background-color: rgba(195, 13, 35, 0.83);
}

#explain_close:active {
    opacity: 0.77;
}

#explain_close > p {
    background-color: rgba(195, 13, 35, 0.83);
}

#explain_close:hover > p,
#explain_close:active > p {
    width: 4.3dvmin;
    background-color: rgba(253, 248, 239, 0.96);
}

/* explain_content 部分 */

#explain_content {
    width: min(90dvw, 100dvmin);
    height: 73dvh;
    padding-top: 1dvmin;
    border-top: 0.5dvmin dashed rgb(188, 188, 188);
}

#explain_content > p:not(.ExplainLeft) {
    margin: 1dvmin auto;
}

#explain_content > p.ExplainLeft {
    margin: 1dvmin auto 1dvmin 1.5dvmin;
}

#explain_content > div:not(.Lines) {
    height: min(7.5dvh, 9dvmin);
    margin: 1dvmin auto;
    justify-content: center;
}

#explain_content > div.Lines {
    width: min(87dvw, 97dvmin);
    margin: 1dvmin auto;
    position: static;
    border-radius: 100dvmax;
}