ai{
display:block;
max-width:900px;
margin:0 auto;
padding:0;
font-family:'Georgia','Times New Roman','Noto Serif SC',serif;
background:#ffffff;
color:#2c2c2c;
font-size:15px;
line-height:1.8;
border:3px solid #1a1a1a;
border-radius:8px;
box-shadow:0 8px 32px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.5);
position:relative;
overflow:hidden;
}
ai::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:8px;
background:repeating-linear-gradient(90deg,#1a1a1a 0px,#1a1a1a 10px,#8b0000 10px,#8b0000 20px,#1a1a1a 20px,#1a1a1a 30px);
}
ai::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:8px;
background:repeating-linear-gradient(90deg,#1a1a1a 0px,#1a1a1a 10px,#8b0000 10px,#8b0000 20px,#1a1a1a 20px,#1a1a1a 30px);
}
hd{
display:flex;
flex-wrap:wrap;
gap:12px;
padding:20px 25px;
background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);
border-bottom:3px solid #8b0000;
margin:0;
font-size:13px;
position:relative;
}
hd::after{
content:'';
position:absolute;
bottom:-3px;
left:50%;
transform:translateX(-50%);
width:60px;
height:12px;
background:#8b0000;
border-radius:0 0 50% 50%;
box-shadow:0 2px 8px rgba(139,0,0,0.5);
}
hd t{
display:inline-block;
color:#e0e0e0;
position:relative;
padding-left:20px;
font-weight:500;
}
hd t::before{
content:'◆';
position:absolute;
left:0;
color:#d4af37;
font-size:10px;
}
hd t:last-child{
color:#ff6b6b;
font-weight:bold;
background:rgba(255,107,107,0.1);
padding:4px 12px;
border-radius:4px;
padding-left:28px;
}
article{
display:block;
margin:25px;
padding:20px;
background:#ffffff;
border:2px solid #e8e8e8;
border-left:5px solid #8b0000;
border-radius:6px;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
position:relative;
}
article::before{
content:'';
position:absolute;
top:-2px;
right:20px;
width:40px;
height:40px;
background:radial-gradient(circle,#8b0000 30%,transparent 30%),radial-gradient(circle,#8b0000 30%,transparent 30%);
background-size:8px 8px;
background-position:0 0,4px 4px;
opacity:0.15;
}
article p{
margin-bottom:15px;
color:#2c2c2c;
text-align:justify;
}
article p:last-child{
margin-bottom:0;
}
details{
margin:20px 25px;
background:#ffffff;
border:2px solid #e8e8e8;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
transition:all 0.3s ease;
}
details[open]{
border-color:#8b0000;
box-shadow:0 4px 20px rgba(139,0,0,0.15);
}
summary{
padding:16px 20px;
background:linear-gradient(to right,#f8f8f8 0%,#ffffff 100%);
color:#1a1a1a;
font-weight:bold;
cursor:pointer;
user-select:none;
font-size:14px;
position:relative;
transition:all 0.3s;
border-bottom:2px solid #e8e8e8;
}
summary::before{
content:'';
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:12px;
height:12px;
background:#8b0000;
border-radius:50%;
box-shadow:0 0 0 3px rgba(139,0,0,0.2);
transition:all 0.3s;
}
summary::after{
content:'▼';
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
color:#8b0000;
font-size:10px;
transition:transform 0.3s;
}
details[open] summary::after{
transform:translateY(-50%) rotate(180deg);
}
summary:hover{
background:linear-gradient(to right,#fff5f5 0%,#ffffff 100%);
padding-left:25px;
}
details p{
padding:16px 20px;
margin:0;
border-bottom:1px solid #f0f0f0;
background:#ffffff;
color:#2c2c2c;
}
details p:last-child{
border-bottom:none;
}
details p[t]::before{
content:attr(t);
display:block;
color:#8b0000;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:10px;
padding-bottom:8px;
border-bottom:2px solid #f0f0f0;
position:relative;
padding-left:20px;
}
details p[t]::after{
content:'';
position:absolute;
left:0;
top:0;
width:12px;
height:12px;
background:#d4af37;
border-radius:50%;
}
f{
display:inline-block;
color:#8b0000;
font-weight:bold;
padding:4px 12px;
background:rgba(139,0,0,0.08);
border:1px solid rgba(139,0,0,0.2);
border-radius:4px;
margin-right:8px;
font-size:13px;
}
d{
display:block;
color:#4a4a4a;
padding:8px 0;
padding-left:25px;
position:relative;
transition:all 0.2s;
}
d::before{
content:'';
position:absolute;
left:8px;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
background:#d4af37;
border-radius:50%;
}
d:hover{
color:#8b0000;
padding-left:30px;
background:rgba(139,0,0,0.03);
}
d:hover::before{
background:#8b0000;
box-shadow:0 0 8px rgba(139,0,0,0.4);
}
@media(max-width:768px){
ai{
border-width:2px;
border-radius:6px;
}
ai::before,ai::after{
height:6px;
}
hd{
flex-direction:column;
gap:8px;
padding:15px 20px;
font-size:12px;
}
hd::after{
width:40px;
height:8px;
}
article{
margin:15px;
padding:15px;
}
summary{
font-size:13px;
padding:14px 18px;
}
summary::before{
left:18px;
width:10px;
height:10px;
}
summary::after{
right:18px;
}
details p{
padding:14px 18px;
font-size:14px;
}
f{
font-size:12px;
padding:3px 10px;
}
d{
font-size:13px;
padding-left:20px;
}
d::before{
left:6px;
width:5px;
height:5px;
}
}