[plots="expand"] body:where(.post-type-archive-thyuu_moment) .site-main {
    grid-template-columns: var(--side-size) 1fr var(--side-size);
}
body.post-type-archive-thyuu_moment .page-article {
    grid: none;
    width: min(var(--thyuu--size-content), 100%);
    margin: auto;
}
body.single-thyuu_moment .site-main {
    padding: var(--thyuu--size-edgetb) 0;
    align-content: center;
}
body.single-thyuu_moment .moment-thumbnail {
    position: fixed;
    inset: -1em;
    z-index: -1;
}
body.single-thyuu_moment .moment-item {
    transform: none;
    background: none;
    width: min(var(--thyuu--size-content), 100%);
    margin: auto;
}
.moment-authors {
    min-width: 0;
}
.moment-authors-list {
    --avatar-size: 3em;
    display: grid;
    justify-content: start;
    grid: auto / auto-flow 4em;
    gap: 1em;
    overflow: scroll;
    padding: 1em;
    margin: -1em;
    mask: var(--thyuu--mask-scroll-x);
}
.moment-authors-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.moment-authors-list a.active .avatar {
    outline-color: currentColor;
    color: hsl(var(--thyuu--main-color) / .5);
}
.moment-authors-list a .avatar:hover {
    color: hsl(var(--thyuu--main-color));
}
:is(.moment-authors, .moment-item) .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: thin solid hsl(var(--thyuu--color-font) / .1);
    outline-offset: .25em;
    margin: .25em;
    transition: .3s;
}
:is(.moment-authors, .moment-item) time {
    font-size: var(--thyuu--size-small);
    color: hsl(var(--thyuu--color-font) / 50%);
}
:is(.moment-authors, .moment-item) .author-name {
    font-size: var(--thyuu--size-small);
    font-weight: 600;
}
.moment-list {
    display: flex;
    gap: 1em;
    flex-direction: column;
}
.moment-item {
    --trfm: translateY(1em);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: var(--thyuu--color-back-white);
    border: thin solid hsl(var(--thyuu--color-font) / 5%);
    border-radius: var(--thyuu--size-radius);
    box-shadow: var(--thyuu--shadow-white);
    overflow: clip;
    transition: all 0.3s ease;
}
.moment-item:hover {
    border-color: hsl(var(--thyuu--main-color) / .1);
}
.moment-thumbnail {
    position: absolute;
    inset: 2em;
}
.moment-thumbnail img {
    filter: blur(2em);
    opacity: .1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.moment-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1em 1em;
    margin: 0 -1em auto;
    gap: 1em .5em;
    border-bottom: thin solid hsl(var(--thyuu--color-font) / 5%);
}
.moment-author .author-info {
    flex: auto;
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: .25em;
}
.moment-meta {
    display: flex;
    flex-wrap: wrap;
    flex: auto;
    justify-content: flex-end;
    font-size: var(--thyuu--size-small);
    color: hsl(var(--thyuu--color-font) / 50%);
    gap: .25em;
}
.moment-meta i {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 1em;
    line-height: 1;
    border-radius: min(var(--thyuu--size-radius) * 2, 2em);
    background: var(--thyuu--color-back-font);
}
.moment-meta i .emoji {
    color: black;
    margin: -.25em;
    font-size: 1.25em;
}
.moment-tags {
    margin: auto 0 0;
    justify-content: left;
    flex: none;
    gap: .5em 1em;
}
.moment-tags a:before {
    content: "\e659";
    font-family: "thyuu-iconfont";
}
.moment-content, .moment-comment {
    position: relative;
    display: flex;
    flex-flow: column;
    flex: min(var(--thyuu--size-card-normal), 100%);
    padding: 1em;
    gap: 1em;
}
.moment-comment {
    flex: 1;
    min-width: 20em;
    min-height: 15em;
    outline: thin solid hsl(var(--thyuu--color-font) / 5%);
}
.moment-comment-list {
    display: flex;
    flex-flow: column;
    flex: 1;
    margin: -1em;
    padding: 1em;
    gap: 1em;
    mask: var(--thyuu--mask-scroll-y);
    max-height: 70vh;
    overflow: auto;
}
.moment-content .entry-content,
.moment-comment-item {
    font-size: var(--thyuu--size-medium);
}
.comment-content {
    display: flex;
    gap: .5em;
}
.comment-content article {
    flex: auto;
}
.comment-content :where(header, footer) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em;
}
.comment-content .comment-text {
    padding: .5em 1em;
    background: var(--thyuu--color-back-font);
    border-radius: min(var(--thyuu--size-radius) * 2, 2em);
    border-top-left-radius: .5em;
    margin: .5em 0 .5em -.25em;
    min-width: 4em;
    width: fit-content;
}
.comment-meta .button {
    padding: .5em;
}
.comment-actions .toggle-replies-btn {
    background: none;
    opacity: .7;
    padding: .5em 0;
}
.comment-actions .toggle-replies-btn:before {
    transition: .3s;
}
.comment-actions .toggle-replies-btn.expanded:before {
    rotate: 180deg;
}
.comment-author-badge {
    padding: .25em .5em;
    background: hsl(var(--thyuu--main-color) / 10%);
    border-radius: min(var(--thyuu--size-radius) * 2, 2em);
    line-height: 1;
}
.moment-comment-list .children {
    display: flex;
    flex-flow: column;
    gap: 1em;
    margin: 1em 0 0;
    max-height: fit-content;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: clip;
}
.moment-comment-list [data-comment-level="0"] > .children {
    padding-left: 3em;
}
.moment-comment-list [data-comment-level="0"] > .children:not(.expanded) {
    max-height: 0;
    opacity: 0;
}
.author-meta {
    display: flex;
    align-items: center;
    font-size: var(--thyuu--size-small);
    color: hsl(var(--thyuu--main-color) / .7);
    line-height: 1;
    gap: .5em;
}
.author-meta i {
    padding: .25em .5em;
    background: hsl(var(--thyuu--main-color) / .1);
    border-radius: min(var(--thyuu--size-radius) * 2, 2em);
}
.moment-comment > footer {
    display: flex;
    gap: .25em;
    color: hsl(var(--thyuu--color-font) / .5);
    margin: auto 0 0;
}
.moment-action-btn:not(.thyuu-noone) {
    flex: 1;
    justify-content: flex-start;
}
.moment-quick-comment {
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: auto 1em 1em;
    max-height: 100%;
    max-width: min(var(--thyuu--size-content), 100%);
    margin: auto;
    padding: 1em;
    background: var(--thyuu--color-back-shift, hsl(0 0% 98% / .8));
    box-shadow: var(--thyuu--shadow-normal);
    border-radius: var(--thyuu--size-radius);
    outline: var(--thyuu--border);
    backdrop-filter: blur(2em);
    overflow: auto;
    transition: .3s;
}
.moment-quick-comment.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translatey(1em);
}
.moment-quick-comment .comment-respond {
    margin: 0;
}
.more-comment {
    font-size: .75em;
    opacity: .5;
    display: flex;
    align-items: center;
    gap: 1em;
}
.more-comment:after,.more-comment:before {
    content: "";
    flex: 1;
    border-top: thin solid;
    opacity: .2;
}

.moment-grid-img {
    display: grid;
    grid: auto / repeat(var(--num,3), 1fr);
    gap: .5em;
}
.moment-grid-img[num="1"] {
    --num: 1;
}
.moment-grid-img:where([num="2"],[num="4"]) {
    --num: 2;
}
.moment-grid-img[num="5"] {
    --num: 6;
}
.moment-grid-img[num="7"] {
    --num: 4;
}
.moment-grid-img img {
    aspect-ratio: 1;
    border-radius: min(var(--thyuu--size-radius), .5em);
    object-fit: cover;
}
.moment-grid-img[num="5"] img:nth-child(1) {
    grid-area: span 4 / span 4;
}
.moment-grid-img[num="5"] img:nth-last-child(-n+2) {
    grid-area: span 2 / span 3;
    aspect-ratio: 1.5;
}
.moment-grid-img[num="5"] img,
.moment-grid-img[num="6"] img:nth-child(1),
.moment-grid-img[num="7"] img:nth-child(-n+3) {
    grid-area: span 2 / span 2;
}
.moment-grid-img[num="8"] img:last-child {
    grid-area: span 1 / span 2;
    height: 100%;
    aspect-ratio: 4;
}