body, html {
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2; /* 背景颜色 */
    font-family: 'Arial', sans-serif;
}

.calculator {
    width: 400px; /* 计算器宽度 */
    border-radius: 30px; /* 圆角 */
    overflow: hidden; /* 隐藏超出边界部分 */
    background: #ffffff; /* 背景颜色 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.display {
    background: #000; /* 显示区域颜色 */
    color: #ffffff; /* 字体颜色 */
    font-size: 64px; /* 字体大小 */
    text-align: right; /* 文字右对齐 */
    padding: 20px; /* 内边距 */
    border-bottom: 1px solid #dddddd; /* 下边框 */
    height: 100px; /* 显示区域高度 */
    box-sizing: border-box; /* 包括内边距和边框 */
    overflow: hidden; /* 隐藏超出内容 */
}

.buttons {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 四列 */
    gap: 1px; /* 按钮间隔 */
}

.button {
    height: 80px; /* 按钮高度 */
    border: none; /* 无边框 */
    font-size: 36px; /* 字体大小 */
    color: white; /* 字体颜色 */
    background: #007AFF; /* 按钮颜色 */
    transition: background 0.3s; /* 背景颜色渐变 */
}

.button.zero {
    grid-column: span 2; /* 0按钮跨两列 */
}

.button.function {
    background: #8E8E93; /* 功能按钮颜色 */
}

.button.operator {
    background: #FF3B30; /* 运算符按钮颜色 */
}

.button:hover {
    cursor: pointer; /* 鼠标样式 */
    background: #0051D4; /* 鼠标悬停效果 */
}

.button.operator:hover {
    background: #7A7A7A; /* 运算符鼠标悬停效果 */
}

.button.function:hover {
    background: #7A7A7A; /* 功能按钮鼠标悬停效果 */
}