.rem {
    --list-indent: 3ch;
    --children-indent: .5ch;
    --list-item-delta: -2.9ch;
    --details-padding-inline: .75ch;
    --details-padding-block: .2em;
    --details-summary-indent: 2ch;
    --hover-bg-color: rgba(100, 100, 100, 0.08);
    --active-bg-color: rgba(100, 100, 100, 0.14);
    --details-indent: 1em;
    --details-inset-block-end: 2px;
    --details-marker-delta: .5ch;
    --details-border-inline-start-color: #333;
    --details-border-inline-start: 2px dashed var(--details-border-inline-start-color);
    --bg-transition: background-color 0.15s ease-in-out;
    --bg-theme: rgb(185, 158, 255);
    --bg-callout: color-mix(in oklab, var(--bg-theme), white, 10%);
    --border-radius: 4px;
    --border-color: rgb(50, 50, 52);
}

.rem * {
    box-sizing: border-box;
}

.rem ul,
.rem ol {
    padding-inline-start: var(--list-indent);
    list-style: initial;
}

.rem ul:not(details *),
.rem ol:not(details *) {
    padding-inline-start: unset;
}

.rem ol {
    list-style-type: decimal;
}

.rem ol ol {
    list-style-type: lower-alpha;
}

.rem ol ol ol {
    list-style-type: lower-roman;
}

.rem li:has(details:only-child) {
    margin-inline-start: var(--list-item-delta);
}

.rem ul li:has(details:only-child) {
    list-style-type: none;
    /* hide the marker of li */
}

.rem details {
    position: relative;
    padding-inline-start: var(--details-padding-inline);
    padding-inline-end: var(--details-padding-inline);
    padding-block-start: var(--details-padding-block);
    padding-block-end: var(--details-padding-block);
    margin-block-end: .2em;
    border-radius: var(--border-radius);
    transition: var(--bg-transition);
}

.rem summary {
    margin: 0;
    padding-block: 0;
    padding-inline-end: 0;
    padding-inline-start: var(--details-summary-indent);
    text-indent: calc(-1 * var(--details-summary-indent));
}

.rem summary::-webkit-details-marker,
.rem summary::marker
{ 
  display: block;
}

.rem summary>* {
    text-indent: initial;
    /* prevent inheritance */
}

.rem details:hover {
    background-color: var(--hover-bg-color);
}

/* 
.rem details[open]::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--details-padding-inline, .75ch) + var(--details-marker-delta, .5ch));
    inset-block-start: var(--details-indent);
    inset-block-end: var(--details-inset-block-end);
    border-inline-start: var(--details-border-inline-start);
}
*/

.rem details[open] > :not(summary) {
    margin-inline-start: var(--children-indent);
    border-inline-start: var(--details-border-inline-start);
}

#vert:target .rem details[open]::before {
    border-image: linear-gradient(to left, var(--details-border-inline-start-color) 50%, transparent 50%) 1 100%;
}

.rem summary > div, .rem summary > blockquote {
  display: inline-block;
  vertical-align: middle;
  inline-size: calc(100% - 1.2ch);
  margin-inline-start: .8ch;
}

.rem blockquote {
    border-inline-start: .2em solid #6a6a6a93;
    padding-inline-start: var(--details-padding-inline);
}

.rem .callout {
    padding: .5em;
    background-color: var(--bg-callout);
    border: 1px solid var(--border-color);
}

.rem .callout[data-callout-icon]::before {
    content: attr(data-callout-icon);
    display: inline-block;
    margin-inline-end: .5ch;
}

.rem .callout .callout-icon {
    margin-inline-start: .4ch;
    margin-inline-end: .8ch;
}

.rem .link-card img {
    max-inline-size: min(20vi, 35%);
}

.rem .link-card {
    border: 2px dashed var(--border-color);
    display: inline;
}

.rem .link-card > * {
    display: none;
}

.rem .link-card a.link-card-title {
    display: inline;
}

.rem .link-card a.link-card-title::after {
    content: "[预览]";
}

.rem .link-card:hover,
.rem .link-card:hover > *,
.rem .link-card:hover a.link-card-title
{
    display: block;
}

.rem *:has(>.link-card:not(:only-child)):hover>.link-card,
.rem *:has(>.link-card:not(:only-child)):hover>.link-card > *,
.rem *:has(>.link-card:not(:only-child)):hover>a.link-card-title {
    display: block;
}