/* 基础设置 */
details {
    /* 建议添加移动端兼容前缀 */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
/* 添加媒体查询适配移动端 */
@media screen and (max-width: 768px) {
    details {
        padding: 0.3em;
        margin: 0.5em 0;
    }
    
    summary {
        font-size: 14px;
    }
}
details:not([open]) {
    height: auto;
    overflow: hidden;
}
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
details {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}
details[open] {
    min-height: 100px; /* 设置最小高度避免闪烁 */
    height: auto;
}
* {
    box-sizing: border-box;
}

/* 基础文字样式 */
:root {
    --main-font: "Microsoft YaHei", "Arial", sans-serif;
    --base-size: 16px;
    --pink-light: #ffb6c1;
    --pink-medium: #ff69b4;
    --pink-dark: #ff1493;
    --pink-pale: #ffd1dc;
}

/* 通用文字基础样式 */
.base-text {
    font-family: var(--main-font);
    font-size: 16px;
}

/* 段落样式 */
p {
    font-family: var(--main-font);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--pink-medium);
}

/* 标题样式 */
h1 {
    font-family: var(--main-font);
    font-size: 16px;
    border-top: 0.5em solid var(--pink-pale);
    margin-top: 0;
    padding-top: 0.5em;
    color: var(--pink-medium);
}

/* 字体样式 */
font {
    font-family: var(--main-font);
    font-weight: bold;
    color: var(--pink-dark);
}

/* 隐藏内存元素 */
memory {
    display: none;
}


/* 列表项样式 */
li {
    font-family: var(--main-font);
    font-weight: bold;
    list-style-type: disc;
    color: var(--pink-medium);
}

/* 详情框样式 */
details {
    background: rgba(255, 192, 203, 0.1);
    padding: 0.5em;
    margin: 1em 0;
    border-left: 0.3em solid var(--pink-light);
    border-radius: 8px;
    transition: background 0.3s ease;
}

/* 详情框标题样式 */
summary {
    font-family: var(--main-font);
    color: var(--pink-medium);
    font-size: 0.8em;
    cursor: pointer;
    padding: 0.5em 0;
    transition: color 0.3s ease;
}

/* 打开的详情框样式 */
details[open] summary {
    margin-bottom: 1em;
    border-bottom: 0.1em solid rgba(255, 182, 193, 0.3);
}

/* 悬停效果 */
details:hover {
    background: rgba(255, 192, 203, 0.2);
}