#alohomora {
    flex-direction: column;
}

@media (min-width: 1000px) {
    #alohomora {
        flex-direction: row;
        align-items: center;
    }
}

#alohomora-graph-box {
    margin: 6rem 0 0 0;
}

@media (min-width: 1000px) {
    #alohomora-graph-box {
        margin-top: 0;
        width: 40%;
        margin-left: 10dvw;
    }
}

#alohomora-svg-box {
    margin: 0 1rem 0 1rem;
    width: calc(100% - 1rem * 2);
    height: 42dvh;
    display: flex;
    justify-content: center;
}

@media (min-width: 1000px) {
    #alohomora-svg-box {
        margin: 1rem 0 1rem 0;
        width: 100%;
        height: auto;
    }
}

#alohomora-svg-box svg {
    height: 100%;
    width: 100%;
    /* 与文本等宽 */
    max-width: 285px;
}

@media (min-width: 1000px) {
    #alohomora-svg-box svg {
        max-width: 50dvh;
    }
}

#alohomora-words-box {
    margin: 3rem 1rem 0 1rem;
    height: 3rem;
    width: calc(100% - 1rem * 2);
    display: flex;
    justify-content: center;
}

#alohomora-words {
    /* font-weight: 900; */
    /* color: var(--content-color-primary); */
    color: color-mix(in srgb, color-mix(in srgb, var(--bg-color-1) 50%, var(--bg-color-2) 50%), white 60%);
    font-family: 'text-en', 'Noto Serif CJK SC', serif;
    font-size: 2.4rem;

    text-align: left;
    white-space: nowrap; /* 或者 pre-wrap，防止空格被合并 */
    display: inline-block; /* 确保容器有稳定的盒子模型 */
}

@media (min-width: 1000px) {
    #alohomora-words {
        font-size: calc(50dvh / 7);
    }
}

/* 按钮容器 */
#alohomora-button-box {
    width: 100%;
    height: calc(100dvh - 40dvh - 6rem - 3em - 3rem * 2);
    /* 内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 1000px) {
    #alohomora-button-box {
        width: 40%;
        margin-right: 10dvw;
    }
}

/* 按钮 */
#alohomora-button {
    height: 3.8rem;
    width: 3.8rem;
    border-radius: 100%;
    /* 内部图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0;
}

@media (min-width: 1000px) {
    #alohomora-button {
        height: 5rem;
        width: 5rem;
    }
}

/* 进入按钮内图标 */
#alohomora-button-icon {
    max-height: 1.6rem;
    max-width: 1.6rem;
}

@media (min-width: 1000px) {
    #alohomora-button-icon {
        max-height: 2.2rem;
        max-width: 2.2rem;
    }
}

#alohomora-button-icon path {
    fill: var(--content-color-primary);
}