:root{
--bg-main:#eef7ff;
--bg-card:rgba(255,255,255,0.58);
--bg-card-hover:rgba(255,255,255,0.72);
--blue-soft:#b9e6ff;
--blue-main:#7ccfff;
--blue-deep:#3b8fc2;
--text-main:#253746;
--text-muted:#6d8494;
--line-soft:rgba(124,207,255,0.32);
--shadow-soft:0 10px 30px rgba(91,155,190,0.18);
--shadow-glow:0 0 18px rgba(124,207,255,0.28);
}
body{
margin:0;
padding:18px;
background:radial-gradient(circle at 20% 10%,rgba(185,230,255,0.55),transparent 32%),linear-gradient(135deg,#f8fcff 0%,#eaf7ff 48%,#fffaf2 100%);
color:var(--text-main);
font-family:"Inter","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
line-height:1.75;
}
details{
position:relative;
margin:14px 0;
padding:0;
overflow:hidden;
border:1px solid var(--line-soft);
border-radius:18px;
background:var(--bg-card);
backdrop-filter:blur(18px) saturate(145%);
-webkit-backdrop-filter:blur(18px) saturate(145%);
box-shadow:var(--shadow-soft);
transition:all .28s ease;
}
details:hover{
background:var(--bg-card-hover);
box-shadow:var(--shadow-soft),var(--shadow-glow);
transform:translateY(-1px);
}
details[open]{
border-color:rgba(124,207,255,0.58);
}
summary{
position:relative;
padding:13px 48px 13px 18px;
cursor:pointer;
list-style:none;
font-weight:700;
letter-spacing:.04em;
color:var(--blue-deep);
background:linear-gradient(90deg,rgba(255,255,255,0.86),rgba(185,230,255,0.34));
border-bottom:1px solid rgba(124,207,255,0.22);
user-select:none;
}
summary::-webkit-details-marker{
display:none;
}
summary::before{
content:"";
display:inline-block;
width:9px;
height:9px;
margin-right:9px;
border-radius:50%;
background:var(--blue-main);
box-shadow:0 0 10px rgba(124,207,255,0.85);
vertical-align:middle;
}
summary::after{
content:"⌄";
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%) rotate(0deg);
font-size:18px;
color:var(--blue-deep);
transition:transform .24s ease;
}
details[open]>summary::after{
transform:translateY(-50%) rotate(180deg);
}
details>*:not(summary){
margin-left:18px;
margin-right:18px;
}
details>p,
details>ul,
details>ol,
details>table,
details>div{
margin-top:12px;
margin-bottom:12px;
}
strong{
color:#2d6f99;
font-weight:700;
}
ul{
padding-left:1.35em;
}
li::marker{
color:var(--blue-main);
}
hr{
border:none;
height:1px;
margin:16px 0;
background:linear-gradient(90deg,transparent,rgba(124,207,255,0.55),transparent);
}
table{
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border:1px solid rgba(124,207,255,0.25);
border-radius:14px;
background:rgba(255,255,255,0.42);
font-size:14px;
}
th,
td{
padding:9px 11px;
border-bottom:1px solid rgba(124,207,255,0.18);
text-align:left;
}
th{
color:#2d6f99;
background:rgba(185,230,255,0.34);
font-weight:700;
}
tr:last-child td{
border-bottom:none;
}
details:nth-of-type(4) summary,
details:nth-of-type(5) summary{
color:#2f7fae;
background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(207,239,255,0.48));
}
details:nth-of-type(4)::after,
details:nth-of-type(5)::after{
content:"";
position:absolute;
inset:auto 18px 14px auto;
width:72px;
height:72px;
border-radius:50%;
background:radial-gradient(circle,rgba(124,207,255,0.2),transparent 68%);
pointer-events:none;
}
details:last-of-type{
border-color:rgba(124,207,255,0.48);
background:rgba(255,255,255,0.64);
}
details:last-of-type summary{
color:#ffffff;
background:linear-gradient(135deg,#8fd8ff,#62bdec);
}
details:last-of-type ol{
padding-left:1.45em;
}
details:last-of-type li{
margin:7px 0;
padding:6px 10px;
border-radius:10px;
background:rgba(255,255,255,0.46);
}
@media(max-width:640px){
body{
padding:10px;
font-size:14px;
}
summary{
padding:12px 42px 12px 14px;
}
details>*:not(summary){
margin-left:13px;
margin-right:13px;
}
table{
font-size:12px;
}
th,
td{
padding:7px 8px;
}
}