.term{
position:relative;
margin:var(--gd2) 0;
width:100%;
background-color:#0c0c0c;
border-radius:var(--br1);
overflow:hidden;
}
.term pre{
margin:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.term pre code{
display:inline-block;
min-width:100%;
padding:var(--gap);
padding-right:calc(var(--gap) + 42px);
font-family:var(--ff3);
font-size:var(--fz2);
font-weight:400;
line-height:1.55;
color:#cccccc;
white-space:pre;
background:none;
border-radius:0;
}
.term-hd,.term-ft{
display:flex;
align-items:center;
height:44px;
padding:.15em var(--gap) 0;
font-family:var(--ff1);
font-size:var(--fz5);
font-weight:700;
letter-spacing:.09em;
text-transform:uppercase;
color:#949494;
}
.term-hd{
background-color:#171717;
}
.term-ft{
justify-content:flex-end;
color:#858585;
border-top:1px solid #232323;
}
.term-hd.hd-dots{
position:relative;
justify-content:center;
background-color:#1c1f26;
color:#949cab;
}
.term-hd.hd-dots .term-dots{
position:absolute;
left:var(--gap);
top:0;
height:100%;
display:flex;
align-items:center;
gap:var(--gd4);
}
.term-hd.hd-dots .term-dots i{
width:9px;
height:9px;
border-radius:50%;
background-color:#454b57;
}
.term-hd.hd-tab{
padding:0;
background-color:#131313;
}
.term-hd.hd-tab span{
display:flex;
align-items:center;
height:100%;
padding:.15em var(--gap) 0;
color:#d6d6d6;
background-color:#0c0c0c;
}
.term-hd~pre code{
padding-right:calc(var(--gap) + 42px);
}
.term-hd~pre .code-copy-btn{
top:1px;
right:var(--gd4);
background-color:transparent;
}
.term.t-slate{
background-color:#14171c;
}
.term .term-p{
color:#b9b9b9;
}
.term .term-c{
color:#f2f2f2;
font-weight:600;
}
.term .term-a{
color:#4cc2ff;
}
.term .term-d{
color:#9d9d9d;
}
.term .term-o{
color:#8f8f8f;
}
.term .term-u{
color:#8ae234;
font-weight:600;
}
.term .term-w{
color:#729fcf;
font-weight:600;
}
.term .term-m{
color:#6a9955;
}
.term .term-k{
color:#569cd6;
}
.term .term-s{
color:#ce9178;
}
.term .term-v{
color:#9cdcfe;
}
.term .term-f{
color:#dcdcaa;
}
figure.art-img>.term{
margin:0;
}
.term .code-copy-btn{
background-color:#0c0c0c;
}
.term .code-copy-btn:hover{
background-color:#232323;
}
.term .code-copy-btn.copied{
background-color:var(--cbg);
}
.term .code-copy-btn path{
fill:#9d9d9d;
}
.term .code-copy-btn.copied path{
fill:var(--ctx);
}
@media(max-width:700px){
.term pre code{
font-size:var(--fz3);
padding:var(--gd2);
padding-right:calc(var(--gd2) + 42px);
}
.term-hd~pre code{
padding-right:calc(var(--gd2) + 42px);
}
}