/* The live examples use the same readable palette as the vector workspace. */
.j3-page .j3-functional .req-feed{--feed-tag-bg:#dbd9e7;--feed-tag-ink:#393456;--feed-warm-bg:#d6d4e1;--feed-warm-ink:#745530;--feed-alert-bg:#f3ded3;--feed-alert-ink:#874c3c}
html[data-theme="dark"] .j3-page .j3-functional .req-feed{--feed-tag-bg:#3a3652;--feed-tag-ink:#d2cfe2;--feed-warm-bg:#594936;--feed-warm-ink:#cac8d8;--feed-alert-bg:#613f37;--feed-alert-ink:#f5cdbb}
.j3-page .j3-functional .req-feed :is(.req-name,.req-msg){color:var(--j3-ink)}
.j3-page .j3-functional .req-feed :is(.req-ch,.req-time){color:var(--j3-muted)}
.j3-page .j3-functional .req-feed .req-avatar{background:var(--feed-tag-bg)!important;color:var(--feed-tag-ink)!important;border:1px solid var(--j3-line)}
.j3-page .j3-functional .req-feed .req-tag{background:var(--feed-tag-bg);color:var(--feed-tag-ink);border:1px solid var(--j3-line);font-size:10px;line-height:1.4;letter-spacing:.02em}
.j3-page .j3-functional .req-feed :is(.req-tag--message,.req-tag--review,.req-tag--offtarget){background:var(--feed-warm-bg);color:var(--feed-warm-ink)}
.j3-page .j3-functional .req-feed .req-tag--spam{background:var(--feed-alert-bg);color:var(--feed-alert-ink)}
.j3-page .j3-functional .req-feed .req-count{background:var(--feed-tag-bg);color:var(--feed-tag-ink);border-color:var(--j3-line)}
.j3-page .j3-functional .req-feed .req-feed-footer{background:var(--j3-white);color:var(--j3-muted);border-color:var(--j3-line)}
/* Alpha fade inherits the actual surface instead of painting white over it. */
.j3-page .j3-functional .req-list-wrap{background:var(--j3-white);-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 0,#000 calc(100% - 18px),transparent)}
@media(max-width:600px){.j3-page .j3-functional .req-feed .req-name{font-size:13px}.j3-page .j3-functional .req-feed .req-msg{font-size:12px}.j3-page .j3-functional .req-feed .req-tag{font-size:9px;padding:3px 6px}}