.stage:not([data-mode="loading"]) .comment-roll,
.stage[data-mode="loading"] .comment-roll ~ .intro,
.stage[data-mode="loading"] .comment-roll ~ .stage-actions {
    display: none;
}

.comment-roll {
    --roll-row: 44px;
    --roll-gap: 8px;
    --roll-step: calc(var(--roll-row) + var(--roll-gap));
    width: min(386px, calc(100vw - 76px));
    padding: 15px 0;
}

.roll-heading { margin-bottom: 13px; }
.roll-source { justify-content: center; color: #d7bafb; }
.roll-title {
    margin: 5px 0 0;
    color: #f5efff;
    font-size: clamp(24px, 4vw, 33px);
    font-weight: 720;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.roll-window {
    position: relative;
    height: calc(3 * var(--roll-step) - var(--roll-gap));
    overflow: hidden;
    mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

.roll-track {
    display: grid;
    gap: var(--roll-gap);
    animation: comment-reel 2.8s linear infinite;
}

.roll-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--roll-row);
    padding: 6px 11px;
    text-align: start;
    border: 1px solid #cbb1f13b;
    border-radius: 11px;
    background: linear-gradient(120deg, #4a3769, #34274e);
    box-shadow: inset 0 1px #ebd9ff0e;
}
.roll-row:nth-child(4n + 2) { --roll-color: #e5adbf; --roll-name: 38%; --roll-text: 68%; }
.roll-row:nth-child(4n + 3) { --roll-color: #b6d8cc; --roll-name: 28%; --roll-text: 86%; }
.roll-row:nth-child(4n + 4) { --roll-color: #e3c394; --roll-name: 33%; --roll-text: 56%; }
.roll-avatar {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--roll-color, #cdb5f5);
    color: #352448;
    font-size: 12px;
    font-weight: 750;
}
.roll-lines { display: grid; gap: 5px; flex: 1; min-width: 0; }
.roll-line { display: block; height: 5px; border-radius: 9px; background: #d8c3fa42; }
.roll-line:first-child { width: var(--roll-name, 24%); background: #e8d6ff76; }
.roll-line:last-child { width: var(--roll-text, 73%); }

.roll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    min-height: 29px;
    color: #d2c4e2;
    font-size: 12px;
    text-align: start;
}
.roll-toggle {
    flex: none;
    padding: 5px 9px;
    color: #e9d7ff;
    background: #d3affb14;
    border: 1px solid #d3affb3d;
    border-radius: 7px;
    font-size: inherit;
}
.roll-toggle:hover { background: #d3affb30; }
.comment-roll[data-paused="true"] .roll-track { animation-play-state: paused; }

.comment-roll[data-phase="settling"] .roll-window { mask-image: none; }
.comment-roll[data-phase="settling"] .roll-track {
    min-height: 100%;
    align-content: center;
    animation: comment-settle .48s cubic-bezier(.18, .7, .26, 1) both;
}
.comment-roll[data-paused="true"][data-phase="settling"] .roll-track { animation: none; }
.comment-roll[data-phase="settling"] .roll-lines { gap: 1px; }
.roll-name, .roll-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.1;
}
.roll-name { color: #f3e5ff; }
.roll-text { color: #d9cbea; }

@keyframes comment-reel { to { transform: translateY(calc(-4 * var(--roll-step))); } }
@keyframes comment-settle {
    from { opacity: .25; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .comment-roll .roll-track { animation: none !important; }
    .stage[data-mode="loading"] .dot { animation: none; }
    .roll-toggle { display: none; }
}