*{
    padding: 0px;
    margin: 0px;
}
h1 {
    text-align: center;
    font-size: 60px;
    margin-top: 60px;
    color: white;
}
h2 {
    text-align: center;
    font-size: 40px;
    transform: translateX(300px);
    margin-top: 30px;
    color: white;
}
.introduction {
    width: 800px;
    text-indent: 2em;
    line-height: 1.8;
    color: white;
    font-size: 30px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 160px;
}
img{
    max-width: 100%;
    height:auto;
}
.no-scroll {
  height: 100vh;
  overflow: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.button1 {
color: white;
text-decoration: none;
border: 2px solid #ACACAC;
padding:0px 10px;
border-radius: 10px;
display: inline-block;
font-size: 40px;
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
}
header,main,footer {
    letter-spacing: 4px;
}
footer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
}
a {
    color: white;
    text-decoration: none;
}


.backgroundstory1 {
        width: 1200px;
    text-indent: 2em;
    line-height: 1.5;
    color: white;
    font-size: 23px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 160px;
    font-weight: normal;
}
.scroll {
  height: 100vh;
  overflow: auto;
}
.backgroundstory1 span {
    display: block;
    text-indent: 2em;
}
.button2 {
color: white;
text-decoration: none;
border: 2px solid #ACACAC;
padding:0px 10px;
border-radius: 10px;
display: block;
width: fit-content;
font-size: 40px;
margin: 60px auto 100px;
}


.backgroundstory2 {
        width: 1200px;
    text-indent: 2em;
    line-height: 1.5;
    color: white;
    font-size: 23px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 160px;
    font-weight: normal;
}
.button3 {
color: white;
text-decoration: none;
border: 2px solid #ACACAC;
padding:0px 10px;
border-radius: 10px;
display: block;
width: fit-content;
font-size: 40px;
margin: 60px auto 100px;
}
.backgroundstory2 span {
    display: block;
    text-indent: 2em;
    }


.button4 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 60px 80px;
    width: fit-content;
    justify-items: center;
    align-items: center;
}
.bt4-1 {
    grid-column: 1;
    grid-row: 1;
}
.bt4-2 {
    grid-column: 2;
    grid-row: 1;
}
.bt4-3 {
    grid-column: 3;
    grid-row: 1;
}
.bt4-4 {
    grid-column: 1;
    grid-row: 2;
}
.bt4-5 {
    grid-column: 2;
    grid-row: 2;
}
.bt4-6 {
    grid-column: 3;
    grid-row: 2;
}
.bt4 {
    display: block;
    padding: 20px 40px;
    border: 1px solid #8b949e;
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    letter-spacing: 2px;
    transition: all 0.3s;
    white-space: nowrap;
    border-radius: 10px;
}
.bt4:hover {
    border-color: #e6edf3;
    color: #e6edf3;
}
.p4body {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;   
    height: 100vh;       
    margin: 0;
    overflow: hidden;
}
.p4h3 {
    font-size: 60px;
    font-weight: normal;
    margin-bottom: 120px;
    color: white;
    text-align: center;
}


.phone1-page {
    display: flex;              /* flex 布局 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    min-height: 100vh;          /* 至少占满一屏 */
    margin: 0;
    background: #0d1117;        /* 深色背景 */
    font-family: 'SimSun', 'Songti SC', serif;
}

/* ========== 手机外壳 ========== */

.phone1 {
    width: 370px;               /* 手机宽度 */
    height: 640px;              /* 手机高度 */
    background: #681461;        /* 外壳深灰色 */
    border-radius: 36px;        /* 圆角，模仿手机外形 */
    padding: 12px;              /* 外壳边框厚度 */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);  /* 阴影，让手机浮起来 */
}

/* ========== 屏幕区域 ========== */

.phone1-screen {
    width: 100%;                /* 撑满外壳宽度 */
    height: 100%;               /* 撑满外壳高度 */
    background: #000;           /* 屏幕黑色 */
    border-radius: 24px;        /* 屏幕圆角 */
    overflow-y: auto;           /* 内容多了可以滚动 */
    padding: 24px 20px;         /* 内边距 */
    box-sizing: border-box;     /* padding 算进宽高里 */
    color: #fff;                /* 白色文字 */
    font-size: 14px;            /* 字号 */
    line-height: 1.7;           /* 行距 */
}

/* 隐藏滚动条 */
.phone1-screen::-webkit-scrollbar {
    display: none;
}

/* ========== 密码输入区 ========== */

.password-box {
    text-align: center;         /* 文字居中 */
    padding: 80px 0;            /* 上下留白 */
}

.password-tip {
    font-size: 23px;            /* 标题字号 */
    color: #f0c674;             /* 暖黄色 */
    letter-spacing: 4px;        /* 字间距 */
    margin-bottom: 20px;        /* 和下面隔开 */
}

.password-hint {
    font-size: 16px;            /* 提示字号 */
    color: #f0c674;             /* 灰色 */
    margin-bottom: 20px;        /* 和输入框隔开 */
}

.password-box input {
    width: 80%;                 /* 输入框宽度 */
    padding: 10px;              /* 内边距 */
    background: #1a1a1a;        /* 深色底 */
    border: 1px solid #333;     /* 深灰边框 */
    border-radius: 8px;         /* 圆角 */
    color: #fff;                /* 白色文字 */
    font-size: 18px;            /* 字号 */
    text-align: center;         /* 文字居中 */
    outline: none;              /* 去掉点击时的蓝框 */
    margin-bottom: 16px;        /* 和按钮隔开 */
}

.password-box input::placeholder {
    color: #555;                /* 占位文字颜色 */
}

.password-box button {
    padding: 10px 32px;         /* 内边距 */
    background: transparent;    /* 透明底 */
    border: 1px solid #8b949e;  /* 灰色边框 */
    border-radius: 8px;         /* 圆角 */
    color: #fff;                /* 白色文字 */
    font-size: 18px;            /* 字号 */
    cursor: pointer;            /* 鼠标变手型 */
    transition: all 0.3s;       /* 平滑过渡 */
}

.password-box button:hover {
    border-color: #e6edf3;      /* 悬停时边框变亮 */
    color: #e6edf3;             /* 悬停时文字变亮 */
}

/* ========== 备忘录内容区 ========== */

.memo-title {
    font-size: 18px;            /* 标题字号 */
    font-weight: normal;        /* 不加粗 */
    color: #e1ec45;             /* 暖黄色 */
    text-align: center;         /* 居中 */
    margin-bottom: 24px;        /* 和下面隔开 */
    letter-spacing: 2px;        /* 字间距 */
}

.memo-item {
    margin-bottom: 16px;        /* 每条之间隔开 */
    padding-bottom: 16px;       /* 每条底部留白 */
    border-bottom: 1px solid #222;  /* 分隔线 */
}

.memo-item:last-child {
    border-bottom: none;        /* 最后一条不要分隔线 */
}

.memo-date {
    font-size: 16px;            /* 日期小号字 */
    color: #e1ec45;             /* 灰色 */
    margin-bottom: 6px;         /* 和正文隔开 */
}
.phone1-screen {
    width: 100%;
    height: 100%;
    background: #000;
    background-image: url('picture/手机1背景.jpg');  /* 手机屏幕背景图 */
    background-size: cover;                        /* 铺满屏幕 */
    background-position: center;                   /* 居中 */
    background-repeat: no-repeat;                  /* 不重复 */
    border-radius: 24px;
    overflow-y: auto;
    padding: 24px 20px;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
}
.phone1-screen {
    position: relative;   /* 让遮罩能定位在里面 */
}


.button5-3 {
    display: flex;               /* flex 布局，让按钮并排 */
    justify-content: center;     /* 水平居中 */
    align-items: center;         /* 垂直居中 */
    gap: 40px;                   /* 按钮之间的间距 */
    margin-top: 60px;            /* 和上面文字隔开 */
}

/* 去掉 p 标签的默认边距 */
.button5-3 p {
    margin: 0;
}

/* 三个按钮共用样式 */
.p5-3-1button,
.p5-3-2button,
.p5-3-3button {
    display: inline-block;       /* 可以设 padding */
    padding: 16px 48px;          /* 内边距，撑出按钮大小 */
    border: 1px solid #8b949e;   /* 灰色边框 */
    color: white;                /* 白色文字 */
    text-decoration: none;       /* 去掉下划线 */
    text-align: center;          /* 文字居中 */
    font-size: 30px;             /* 字号 */
    letter-spacing: 2px;         /* 字间距 */
    border-radius: 10px;         /* 圆角 */
    transition: all 0.3s;        /* 悬停时平滑过渡 */
    white-space: nowrap;         /* 文字不换行 */
}

/* 悬停时变亮 */
.p5-3-1button:hover,
.p5-3-2button:hover,
.p5-3-3button:hover {
    border-color: #e6edf3;       /* 边框变亮 */
    color: #e6edf3;              /* 文字变亮 */
}


.image-page5-3-1 {
    margin: 0;
    padding: 0;
    background: #0d1117;        /* 深色背景，图片没铺满时露出的是深色 */
    display: flex;              /* flex 布局 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    min-height: 100vh;          /* 至少占满一屏 */
}

/* 图片本身 */
.full-image5-3-1 {
    max-width: 100%;            /* 最宽不超过屏幕宽度 */
    max-height: 100vh;          /* 最高不超过屏幕高度 */
    width: auto;                /* 宽度自动，保持比例 */
    height: auto;               /* 高度自动，保持比例 */
    object-fit: contain;        /* 图片完整显示，不裁切 */
}