discord-transcript-ui 1.0.1 → 1.1.0

package/dist/v1.1.0/discord-transcript.short.css

@@ -0,0 +1,1947 @@
+/*!
+ * discord-transcript-ui v1.0.0 — single stylesheet for Discord chat transcripts
+ * MIT licensed. Light DOM only: no Shadow DOM, no build step required to use.
+ *
+ * Recovery information for archived transcripts lives in the HTML file itself
+ * (asset URLs + sha256 + mirrors). See docs/CDN-STRATEGY.md in the source repo.
+ *
+ * Contents
+ *   1  tokens          6  inline text      11 embeds
+ *   2  base            7  code              12 attachments
+ *   3  page shell      8  system/command    13 reactions
+ *   4  messages        9  threads           14 action row
+ *   5  message        10  reply             15 a11y + print
+ *
+ * Everything is themed through --dt-* custom properties: override them on
+ * :root, on dms, or per element. Markup contract: docs/SPEC.md.
+ */
+
+/* ==========================================================================
+   1. TOKENS — dark by default, light opt-in
+   ========================================================================== */
+
+/* Tokens live on :root so every component inherits them, and on
+   dms so a transcript can be re-themed without touching the page. */
+:root {
+	--dt-font: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	--dt-font-mono:
+		'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+		'DejaVu Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+	--dt-font-size: 1rem;
+	--dt-line-height: 1.375rem;
+	--dt-radius-sm: 4px;
+	--dt-radius-md: 8px;
+	--dt-radius-lg: 12px;
+
+	/* Discord's 2024+ "visual refresh" palette, taken from its live token sheet.
+	   See docs/DESIGN-TOKENS.md for every value, source URL and open question. */
+	--dt-bg-primary: #323339;
+	--dt-bg-secondary: #393a41;
+	--dt-bg-tertiary: #2c2d32;
+	--dt-bg-embed: #393a41;
+	--dt-bg-code: #323339;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.039);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.078);
+	--dt-bg-scrollbar-thumb: #767780;
+	--dt-bg-scrollbar-track: transparent;
+
+	--dt-text-normal: #f3f3f4;
+	--dt-text-strong: #ffffff;
+	--dt-text-subtle: #c5c6ca;
+	--dt-text-muted: #9d9ea5;
+	--dt-text-link: #76aff6;
+	--dt-text-on-brand: #ffffff;
+	--dt-status-online: #3d9e60;
+	--dt-status-idle: #ffcb6e;
+	--dt-status-dnd: #dc4247;
+	--dt-status-offline: #9d9ea5;
+
+	--dt-border: rgba(151, 151, 159, 0.122);
+	--dt-border-strong: rgba(151, 151, 159, 0.2);
+	--dt-brand: #5865f2;
+	--dt-accent-bar: var(--dt-brand);
+	--dt-role-default: #f3f3f4;
+	--dt-embed-default-color: #4f545c;
+	--dt-divider: rgba(151, 151, 159, 0.122);
+	--dt-line-color: #595a63;
+
+	--dt-mention-bg: rgba(88, 101, 242, 0.239);
+	--dt-mention-text: #cdd7ff;
+	--dt-mention-role-color: var(--dt-role-default);
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: var(--dt-text-normal);
+
+	--dt-spoiler-bg: #7d7e87;
+	--dt-spoiler-revealed-bg: rgba(151, 151, 159, 0.078);
+
+	--dt-gutter: 16px;
+	--dt-avatar-size: 40px;
+	--dt-avatar-gap: 16px;
+	--dt-msg-padding-right: 48px;
+	--dt-reply-avatar-size: 16px;
+
+	--dt-button-secondary: rgba(151, 151, 159, 0.122);
+	--dt-button-secondary-hover: rgba(151, 151, 159, 0.2);
+	--dt-button-primary: #5865f2;
+	--dt-button-primary-hover: #4654c0;
+	--dt-button-success: #248046;
+	--dt-button-danger: #da3e44;
+	--dt-button-link: rgba(151, 151, 159, 0.122);
+
+	--dt-reaction-bg: rgba(151, 151, 159, 0.122);
+	--dt-reaction-border: rgba(151, 151, 159, 0.122);
+	--dt-reaction-bg-reacted: rgba(88, 101, 242, 0.239);
+	--dt-reaction-border-reacted: #5865f2;
+	--dt-reaction-text-reacted: #dfe4ff;
+
+	--dt-focus-ring: #76aff6;
+	--dt-transition: 120ms ease;
+}
+
+/* Light theme: set light-theme on dms, data-theme, or the page root. */
+dms[light-theme],
+dms[data-theme='light'],
+:root[data-theme='light'] {
+	--dt-bg-primary: #ffffff;
+	--dt-bg-secondary: #ffffff;
+	--dt-bg-tertiary: #f3f3f4;
+	--dt-bg-embed: #ffffff;
+	--dt-bg-code: #f3f3f4;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.078);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.1);
+	--dt-bg-scrollbar-thumb: #8b8c94;
+	--dt-bg-scrollbar-track: transparent;
+
+	--dt-text-normal: #2e2e34;
+	--dt-text-strong: #28282d;
+	--dt-text-subtle: #595a63;
+	--dt-text-muted: #6c6d76;
+	--dt-text-link: #006dd4;
+	--dt-role-default: #2e2e34;
+
+	--dt-border: rgba(151, 151, 159, 0.278);
+	--dt-border-strong: rgba(151, 151, 159, 0.4);
+	--dt-divider: rgba(151, 151, 159, 0.278);
+	--dt-line-color: #c5c6ca;
+	--dt-embed-default-color: #d4d7dc;
+
+	--dt-mention-bg: rgba(88, 101, 242, 0.15);
+	--dt-mention-text: #2e3c88;
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: #2e2e34;
+
+	--dt-spoiler-bg: #8f9097;
+	--dt-spoiler-revealed-bg: #ebeced;
+
+	--dt-reaction-border: rgba(151, 151, 159, 0.278);
+	--dt-reaction-text-reacted: #273478;
+	--dt-status-online: #01783e;
+	--dt-status-idle: #faaa00;
+	--dt-status-dnd: #d22d39;
+	--dt-status-offline: #5f606a;
+	--dt-focus-ring: #006dd4;
+}
+
+/* Explicit dark still wins inside a light scope. */
+dms[data-theme='dark'] {
+	--dt-bg-primary: #323339;
+	--dt-bg-secondary: #393a41;
+	--dt-bg-tertiary: #2c2d32;
+	--dt-bg-embed: #393a41;
+	--dt-bg-code: #323339;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.039);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.078);
+	--dt-bg-scrollbar-thumb: #767780;
+	--dt-bg-scrollbar-track: transparent;
+	--dt-text-normal: #f3f3f4;
+	--dt-text-strong: #ffffff;
+	--dt-text-subtle: #c5c6ca;
+	--dt-text-muted: #9d9ea5;
+	--dt-text-link: #76aff6;
+	--dt-role-default: #f3f3f4;
+	--dt-border: rgba(151, 151, 159, 0.122);
+	--dt-border-strong: rgba(151, 151, 159, 0.2);
+	--dt-divider: rgba(151, 151, 159, 0.122);
+	--dt-line-color: #595a63;
+	--dt-embed-default-color: #4f545c;
+	--dt-mention-bg: rgba(88, 101, 242, 0.239);
+	--dt-mention-text: #cdd7ff;
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: #f3f3f4;
+	--dt-spoiler-bg: #7d7e87;
+	--dt-spoiler-revealed-bg: rgba(151, 151, 159, 0.078);
+	--dt-reaction-border: rgba(151, 151, 159, 0.122);
+	--dt-reaction-text-reacted: #dfe4ff;
+	--dt-status-online: #3d9e60;
+	--dt-status-idle: #ffcb6e;
+	--dt-status-dnd: #dc4247;
+	--dt-status-offline: #9d9ea5;
+	--dt-focus-ring: #76aff6;
+}
+
+/* ==========================================================================
+   2. BASE
+   ========================================================================== */
+
+:where(
+		dms,
+		dm,
+		dai,
+		drp,
+		de,
+		ded,
+		defs,
+		def,
+		defo,
+		dats,
+		dimg,
+		dfil,
+		daud,
+		dvid,
+		drs,
+		dr,
+		dsp,
+		dti,
+		dme,
+		demo,
+		dc,
+		dp,
+		dq,
+		dli,
+		dul,
+		dol,
+		dh,
+		dcmd,
+		dsy,
+		dth,
+		dthm,
+		dar,
+		dbtn,
+		dvat
+	) {
+	box-sizing: border-box;
+}
+
+:where(
+		dms,
+		dm,
+		de,
+		dats,
+		drs,
+		drp,
+		dsy,
+		dcmd,
+		dth,
+		dthm,
+		dar,
+		dp,
+		dq,
+		dul,
+		dol,
+		dh
+	) {
+	display: block;
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	color: var(--dt-text-normal);
+	text-align: left;
+}
+
+:where(dm, drp, de, dats, drs) {
+	-webkit-text-size-adjust: 100%;
+	word-wrap: break-word;
+	overflow-wrap: anywhere;
+}
+
+/* Inline formatting */
+:where(db) {
+	font-weight: 700;
+}
+
+:where(di) {
+	font-style: italic;
+}
+
+:where(dun) {
+	text-decoration: underline;
+}
+
+:where(dst) {
+	text-decoration: line-through;
+}
+
+/* Discord's "-# small print" (subtext). Discord renders it as <small> at
+   .875rem in the subtle text colour, on its own line; it is not a subscript.
+   Value from Discord's live CSS: docs/DESIGN-TOKENS.md, "Small / <small>". */
+:where(dsub) {
+	display: block;
+	color: var(--dt-text-subtle);
+	font-size: 0.875rem;
+	line-height: 1.20313rem;
+}
+
+/* Markdown headings */
+:where(dh) {
+	display: block;
+	margin: 8px 0 0;
+	font-weight: 600;
+	line-height: 1.375em;
+}
+
+:where(dh[level='1']) {
+	font-size: 1.5rem;
+}
+
+:where(dh[level='2']) {
+	font-size: 1.25rem;
+}
+
+:where(dh[level='3']) {
+	font-size: 1rem;
+}
+
+/* Blockquote */
+:where(dq) {
+	display: block;
+	margin: 4px 0;
+	padding: 0 8px 0 12px;
+	color: var(--dt-text-subtle);
+	border-left: 4px solid var(--dt-line-color);
+	border-radius: var(--dt-radius-sm);
+}
+
+/* Lists */
+:where(dul, dol) {
+	margin: 0;
+	padding-left: 1.375em;
+}
+
+:where(dli) {
+	display: list-item;
+	margin: 0 0 4px;
+	padding: 0;
+}
+
+:where(dul) > dli {
+	list-style: disc outside;
+}
+
+:where(dol) > dli {
+	list-style: decimal outside;
+}
+
+/* Links */
+:where(dl) {
+	color: var(--dt-text-link);
+	text-decoration: none;
+}
+
+:where(dl):hover {
+	text-decoration: underline;
+}
+
+:where(dm, de, ded, def, drp, dq)
+	a:not([class]) {
+	color: var(--dt-text-link);
+	text-decoration: none;
+}
+
+:where(dm, de, ded, def, drp, dq)
+	a:not([class]):hover {
+	text-decoration: underline;
+}
+
+/* ==========================================================================
+   3. PAGE SHELL (optional)
+   ========================================================================== */
+
+.dt-page {
+	min-height: 100vh;
+	margin: 0;
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	-webkit-font-smoothing: antialiased;
+}
+
+.dt-page__inner {
+	max-width: 100%;
+	margin: 0 auto;
+	padding: 1rem 0 4rem;
+}
+
+.dt-page__title {
+	margin: 0 0 1rem;
+	padding: 0 16px;
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--dt-text-strong);
+}
+
+.dt-page__meta {
+	margin: 0 0 1.5rem;
+	padding: 0 16px;
+	font-size: 0.875rem;
+	color: var(--dt-text-muted);
+}
+
+/* ==========================================================================
+   4. MESSAGE LIST
+   ========================================================================== */
+
+:where(dms) {
+	display: block;
+	position: relative;
+	margin: 0 auto;
+	padding: 8px 0 16px;
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	line-height: var(--dt-line-height);
+	overflow-x: hidden;
+	overflow-y: auto;
+	scrollbar-color: var(--dt-bg-scrollbar-thumb) var(--dt-bg-scrollbar-track);
+}
+
+:where(dms[no-background]) {
+	background: transparent;
+	padding: 0;
+}
+
+:where(dms[channel-name])::before {
+	content: attr(channel-name);
+	display: block;
+	margin: 0 0 8px;
+	padding: 4px 16px 12px;
+	border-bottom: 1px solid var(--dt-divider);
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--dt-text-strong);
+}
+
+dms[channel-type='text'][channel-name]::before,
+dms[channel-type='voice'][channel-name]::before,
+dms[channel-type='thread'][channel-name]::before,
+dms[channel-type='forum'][channel-name]::before,
+dms[channel-type='locked'][channel-name]::before {
+	content: '#\00a0' attr(channel-name);
+}
+
+dms ::-webkit-scrollbar {
+	width: 16px;
+	height: 16px;
+}
+
+dms ::-webkit-scrollbar-thumb {
+	background: var(--dt-bg-scrollbar-thumb);
+	border: 4px solid transparent;
+	background-clip: padding-box;
+	border-radius: 8px;
+}
+
+dms ::-webkit-scrollbar-track {
+	background: var(--dt-bg-scrollbar-track);
+}
+
+/* ==========================================================================
+   5. MESSAGE
+   ========================================================================== */
+
+:where(dm) {
+	position: relative;
+	display: block;
+	margin: 0;
+	padding: 2px var(--dt-msg-padding-right) 2px var(--dt-gutter);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	-webkit-user-select: text;
+	user-select: text;
+}
+
+:where(dm:hover) {
+	background: var(--dt-bg-message-hover);
+}
+
+/* Pre-upgrade fallback: no avatar or header yet, but the author name and the
+   message text are both visible, so a JS-less or CSS-only view stays readable. */
+dm:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 600;
+	color: var(--dt-role-default);
+}
+
+dm:not([data-dt-ready]):not([author])::before,
+dm:not([data-dt-ready])[author='']::before {
+	content: '';
+}
+
+/* Structure built by discord-transcript.js */
+.dt-msg {
+	display: grid;
+	grid-template-columns: var(--dt-avatar-size) minmax(0, 1fr);
+	column-gap: var(--dt-avatar-gap);
+	align-items: start;
+}
+
+.dt-avatar {
+	grid-column: 1;
+	width: var(--dt-avatar-size);
+	height: var(--dt-avatar-size);
+	margin-top: 2px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-avatar img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dt-content {
+	grid-column: 2;
+	min-width: 0;
+}
+
+.dt-header {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	min-height: 1.375rem;
+}
+
+.dt-author {
+	margin-right: 8px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+	text-decoration: none;
+}
+
+.dt-author--interactive:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.dt-badges {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin-right: 8px;
+}
+
+.dt-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	height: 16px;
+	padding: 0 5px;
+	border-radius: 4px;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 0.625rem;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+}
+
+/* Verified bot / application tag: a slightly rounded blurple rectangle reading
+   "✓ APP" (the tick is drawn here, the text comes from the script so that it is
+   real, readable text rather than generated content). */
+.dt-badge--verified {
+	padding: 0 5px 0 4px;
+}
+
+.dt-badge--verified::before {
+	content: '\2713';
+	font-size: 0.75rem;
+	line-height: 1;
+}
+
+.dt-badge--server {
+	background: #3ba55c;
+}
+
+.dt-badge--official {
+	background: #1abc84;
+}
+
+.dt-timestamp {
+	font-size: 0.75rem;
+	line-height: 1.375rem;
+	color: var(--dt-text-muted);
+	white-space: nowrap;
+}
+
+.dt-timestamp:hover {
+	text-decoration: underline;
+}
+
+.dt-edited {
+	margin-left: 4px;
+	font-size: 0.625rem;
+	color: var(--dt-text-muted);
+}
+
+.dt-body {
+	display: block;
+	min-width: 0;
+}
+
+.dt-body > :first-child {
+	margin-top: 0;
+}
+
+/* Emoji-only messages render larger. */
+.dt-jumbo {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 2px;
+}
+
+.dt-jumbo demo img,
+.dt-jumbo > img.emoji {
+	width: 48px;
+	height: 48px;
+}
+
+/* States */
+dm[highlight],
+dm[ephemeral],
+dm[mentioned] {
+	background: var(--dt-bg-mentioned);
+}
+
+dm[highlight]::after,
+dm[ephemeral]::after,
+dm[mentioned]::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 2px;
+	background: var(--dt-accent-bar);
+	pointer-events: none;
+}
+
+dm[ephemeral] {
+	background: rgba(88, 101, 242, 0.08);
+}
+
+dm[highlight]:hover,
+dm[mentioned]:hover {
+	background: var(--dt-bg-mentioned);
+}
+
+/* Continuation rows (same author as the previous message), detected by JS or
+   forced by the parser with message-body-only. */
+dm[data-dt-continuation] .dt-avatar,
+dm[message-body-only] .dt-avatar {
+	visibility: hidden;
+}
+
+dm[data-dt-continuation] .dt-header,
+dm[message-body-only] .dt-header {
+	display: none;
+}
+
+dm[data-dt-continuation]:hover::before,
+dm[data-dt-continuation]:focus-within::before {
+	content: attr(data-dt-short-time);
+	position: absolute;
+	top: 3px;
+	left: var(--dt-gutter);
+	width: calc(var(--dt-avatar-size) - 4px);
+	font-size: 0.6875rem;
+	line-height: 1.375rem;
+	color: var(--dt-text-muted);
+	white-space: nowrap;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+dm[data-dt-group-start] {
+	margin-top: 1.0625rem;
+}
+
+dm:first-child {
+	margin-top: 0;
+}
+
+/* Compact mode */
+dms[compact-mode],
+dm[compact-mode] {
+	--dt-avatar-size: 16px;
+	--dt-avatar-gap: 8px;
+	--dt-gutter: 16px;
+	--dt-msg-padding-right: 16px;
+}
+
+dms[compact-mode] dm {
+	padding-top: 1px;
+	padding-bottom: 1px;
+}
+
+dms[compact-mode] .dt-avatar {
+	margin-top: 0.25rem;
+}
+
+dms[compact-mode] .dt-header {
+	display: inline;
+	margin-right: 8px;
+}
+
+dms[compact-mode] .dt-author {
+	margin-right: 6px;
+}
+
+dms[compact-mode] .dt-body {
+	display: inline;
+}
+
+dms[compact-mode] .dt-timestamp {
+	margin-right: 6px;
+	font-size: 0.6875rem;
+}
+
+/* ==========================================================================
+   6. AUTHOR INFO, MENTION, EMOJI, TIME, SPOILER
+   ========================================================================== */
+
+:where(dai) {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+dai:not([data-dt-ready])::before {
+	content: attr(author);
+}
+
+:where(
+		dai[bot],
+		dai[server],
+		dai[official-app],
+		dai[op]
+	)
+	::after {
+	margin-left: 4px;
+	padding: 0 4px;
+	border-radius: 3px;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 0.625rem;
+	font-weight: 600;
+	line-height: 15px;
+}
+
+/* Bots are tagged "APP". Verified bots add the checkmark, so they read "✓ APP"
+   (equal :where() specificity, so the later rule wins for verified bots). */
+:where(dai[bot])::after {
+	content: 'APP';
+}
+
+:where(dai[bot][verified])::after {
+	content: '\2713\00a0APP';
+}
+
+:where(dai[server])::after {
+	content: 'SERVER';
+	background: #3ba55c;
+}
+
+:where(dai[official-app])::after {
+	content: 'OFFICIAL';
+	background: #1abc84;
+}
+
+:where(dai[op])::after {
+	content: 'OP';
+}
+
+/* Mentions */
+:where(dme) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: 3px;
+	background: var(--dt-mention-bg);
+	color: var(--dt-mention-text);
+	font-weight: 500;
+	cursor: pointer;
+}
+
+:where(dme):hover {
+	background: var(--dt-bg-modifier-active);
+}
+
+:where(dme[type='channel']),
+:where(dme[type='voice']),
+:where(dme[type='thread']),
+:where(dme[type='forum']),
+:where(dme[type='locked']) {
+	background: var(--dt-mention-channel-bg);
+	color: var(--dt-mention-channel-text);
+}
+
+:where(dme[type='role']) {
+	background: var(--dt-mention-bg);
+	color: var(--dt-mention-role-color);
+}
+
+/* Prefixes, so the parser does not have to repeat "@" and "#" per mention. */
+dme:not([no-prefix])::before {
+	content: '@';
+}
+
+dme:not([no-prefix])[type='channel']::before,
+dme:not([no-prefix])[type='voice']::before,
+dme:not([no-prefix])[type='thread']::before,
+dme:not([no-prefix])[type='forum']::before,
+dme:not([no-prefix])[type='locked']::before {
+	content: '#';
+}
+
+/* Custom emoji */
+:where(demo) {
+	display: inline-block;
+	vertical-align: -0.25em;
+}
+
+:where(demo) img {
+	display: inline-block;
+	width: 1.375em;
+	height: 1.375em;
+	object-fit: contain;
+	vertical-align: middle;
+}
+
+demo:not([data-dt-ready]):not(:has(img))::before {
+	content: attr(name);
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* Inline timestamp chip */
+:where(dti) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: 3px;
+	background: var(--dt-bg-modifier-hover);
+	font-size: 0.875rem;
+	white-space: nowrap;
+}
+
+:where(dti):hover {
+	background: var(--dt-bg-modifier-active);
+}
+
+/* Spoiler */
+:where(dsp) {
+	display: inline;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-spoiler-bg);
+	color: transparent;
+	cursor: pointer;
+	transition:
+		background var(--dt-transition),
+		color var(--dt-transition);
+}
+
+:where(dsp)::selection {
+	background: transparent;
+	color: transparent;
+}
+
+:where(dsp[activated]),
+:where(dsp[revealed]),
+:where(dsp[data-dt-revealed]) {
+	background: var(--dt-spoiler-revealed-bg);
+	color: inherit;
+	cursor: auto;
+}
+
+/* No-JS safety valve: hovering peeks instead of hiding content forever. */
+dsp:not([data-dt-ready]):hover {
+	background: var(--dt-spoiler-revealed-bg);
+	color: inherit;
+}
+
+dsp[data-dt-ready] {
+	outline: none;
+}
+
+dsp[data-dt-ready]:focus-visible {
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+/* ==========================================================================
+   7. CODE
+   ========================================================================== */
+
+:where(dc) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-inline-code);
+	border: 1px solid var(--dt-border-strong);
+	font-family: var(--dt-font-mono);
+	font-size: 0.85em;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+:where(dc[multiline]) {
+	display: block;
+	margin: 6px 0 0;
+	padding: 8px 12px;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-code);
+	font-size: 0.75rem;
+	line-height: 1rem;
+	white-space: pre;
+	overflow-x: auto;
+	tab-size: 4;
+}
+
+:where(dp) {
+	position: relative;
+	display: block;
+	margin: 6px 0 0;
+	padding: 0;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-code);
+	overflow: hidden;
+}
+
+:where(dp) > :where(dc),
+:where(dp) pre {
+	display: block;
+	margin: 0;
+	padding: 8px 12px;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	font-family: var(--dt-font-mono);
+	font-size: 0.75rem;
+	line-height: 1rem;
+	white-space: pre;
+	overflow-x: auto;
+	tab-size: 4;
+}
+
+:where(dp) code {
+	font-family: inherit;
+}
+
+.dt-code-lang {
+	display: block;
+	padding: 6px 12px 0;
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+.dt-copy {
+	position: absolute;
+	top: 6px;
+	right: 8px;
+	display: none;
+	padding: 2px 8px;
+	border: 1px solid var(--dt-border-strong);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	cursor: pointer;
+}
+
+dp:hover .dt-copy,
+.dt-copy:focus-visible {
+	display: block;
+}
+
+.dt-copy:hover {
+	background: var(--dt-bg-modifier-hover);
+}
+
+/* ==========================================================================
+   8. SYSTEM MESSAGE + SLASH COMMAND
+   ========================================================================== */
+
+/* System messages render entirely from markup and attributes: no JS needed. */
+:where(dsy) {
+	position: relative;
+	display: block;
+	margin: 0;
+	padding: 2px var(--dt-msg-padding-right) 2px
+		calc(var(--dt-gutter) + var(--dt-avatar-size) + var(--dt-avatar-gap));
+	background: transparent;
+	color: var(--dt-text-muted);
+	font-size: 0.9375rem;
+}
+
+:where(dsy)::before {
+	content: '';
+	position: absolute;
+	top: 7px;
+	left: calc(var(--dt-gutter) + (var(--dt-avatar-size) - 16px) / 2);
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: var(--dt-bg-modifier-hover);
+}
+
+dsy[type='join']::before {
+	background: var(--dt-status-online);
+}
+
+dsy[type='leave']::before,
+dsy[type='missed-call']::before,
+dsy[type='alert']::before,
+dsy[type='error']::before {
+	background: var(--dt-status-dnd);
+}
+
+dsy[type='boost']::before {
+	background: #ff73fa;
+}
+
+dsy[type='pin']::before {
+	background: var(--dt-status-idle);
+}
+
+dsy[type='upgrade']::before,
+dsy[type='thread']::before,
+dsy[type='edit']::before,
+dsy[type='call']::before {
+	background: var(--dt-brand);
+}
+
+dsy a,
+dsy :where(dl) {
+	color: var(--dt-text-muted);
+	font-weight: 500;
+}
+
+dsy .dt-system-time {
+	margin-left: 4px;
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* Slash / context command rows */
+:where(dcmd) {
+	position: relative;
+	display: block;
+	margin: 0 0 2px;
+	padding: 0;
+	font-size: 0.9375rem;
+}
+
+dcmd:not([data-dt-ready])::before {
+	content: attr(author) ' used /' attr(command) '\00a0';
+	font-weight: 500;
+	color: var(--dt-text-normal);
+}
+
+/* Avatar placeholder used when no avatar can be resolved, so an archived
+   transcript never depends on a remote image to render its gutter. */
+.dt-avatar--initials {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #ffffff;
+	font-size: 0.875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+/* ==========================================================================
+   9. THREADS
+   ========================================================================== */
+
+:where(dth) {
+	position: relative;
+	display: block;
+	margin: 4px 0 0;
+	padding: 4px 120px 4px 12px;
+	border-left: 2px solid var(--dt-line-color);
+	font-size: 0.875rem;
+	color: var(--dt-text-muted);
+}
+
+dth:not([data-dt-ready])::before {
+	content: attr(name);
+	font-weight: 500;
+	color: var(--dt-text-normal);
+}
+
+dth[cta]::after {
+	content: attr(cta) ' ' '\203a';
+	position: absolute;
+	top: 4px;
+	right: 8px;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--dt-text-muted);
+	pointer-events: none;
+}
+
+dthm {
+	display: block;
+	margin: 2px 0;
+	font-size: 0.875rem;
+}
+
+dthm:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+/* ==========================================================================
+   10. REPLY
+   ========================================================================== */
+
+:where(drp) {
+	position: relative;
+	display: block;
+	margin: 0 0 2px;
+	color: var(--dt-text-normal);
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+	min-height: 1.125rem;
+}
+
+drp:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+drp[mentions]:not([data-dt-ready])::before {
+	content: '@' attr(author) '\00a0';
+}
+
+drp[deleted] > * {
+	display: none;
+}
+
+drp[deleted]::before {
+	content: 'Original message was deleted';
+	font-style: italic;
+	font-weight: 400;
+	color: var(--dt-text-muted);
+}
+
+/* A reply preview sits above the author row (Discord's layout): the reply takes
+   the first grid row, so the avatar and the author name share the second. */
+.dt-msg--has-reply > :where(drp),
+.dt-msg--has-reply > :where(dcmd) {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.dt-msg--has-reply > .dt-avatar,
+.dt-msg--has-reply > .dt-content {
+	grid-row: 2;
+}
+
+/* Curved connector, drawn only once the reply sits in the content column. */
+dm[data-dt-ready] :where(drp)::after {
+	content: '';
+	position: absolute;
+	left: -36px;
+	bottom: -2px;
+	width: 36px;
+	height: 12px;
+	border-left: 2px solid var(--dt-line-color);
+	border-top: 2px solid var(--dt-line-color);
+	border-top-left-radius: 6px;
+	pointer-events: none;
+}
+
+drp[data-dt-ready] .dt-reply-avatar {
+	display: inline-block;
+	width: var(--dt-reply-avatar-size);
+	height: var(--dt-reply-avatar-size);
+	margin-right: 4px;
+	border-radius: 50%;
+	overflow: hidden;
+	vertical-align: -3px;
+	background: var(--dt-bg-tertiary);
+}
+
+drp[data-dt-ready] .dt-reply-avatar img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+drp[data-dt-ready] .dt-reply-author {
+	margin-right: 4px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+drp[data-dt-ready] .dt-reply-author:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+drp[data-dt-ready] .dt-reply-avatar,
+drp[data-dt-ready] .dt-reply-author {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+dms[compact-mode] :where(drp)::after {
+	display: none;
+}
+
+/* ==========================================================================
+   11. EMBEDS
+   ========================================================================== */
+
+:where(de) {
+	position: relative;
+	display: block;
+	margin: 8px 0 0;
+	padding: 2px 16px 16px 12px;
+	border: 1px solid var(--dt-border);
+	border-left: 4px solid var(--dt-embed-color, var(--dt-embed-default-color));
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-embed);
+	max-width: 516px;
+	color: var(--dt-text-normal);
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+}
+
+.dt-embed-content {
+	min-width: 0;
+}
+
+de[thumbnail] .dt-embed-content,
+de[data-dt-thumbnail] .dt-embed-content,
+de:has(.dt-embed-thumbnail) .dt-embed-content {
+	padding-right: 96px;
+}
+
+/* Without the JS-built wrapper, inset the whole embed body instead. */
+de[thumbnail]:not(:has(.dt-embed-content)),
+de[data-dt-thumbnail]:not(:has(.dt-embed-content)),
+de:has(.dt-embed-thumbnail):not(:has(.dt-embed-content)) {
+	padding-right: 104px;
+}
+
+/* Attribute-only embed header, so a title survives without JavaScript.
+   Preferred durable form: emit <span class="dt-embed-author"> and
+   <span class="dt-embed-title"> markup instead (see docs/SPEC.md). */
+de:not([data-dt-ready])[embed-title]::before {
+	content: attr(embed-title);
+	display: block;
+	margin: 0 0 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	line-height: 1.375rem;
+	color: var(--dt-text-strong);
+}
+
+de:not([data-dt-ready]):not([embed-title])[author-name]::before {
+	content: attr(author-name);
+	display: block;
+	margin: 0 0 8px;
+	font-weight: 600;
+	line-height: 1.125rem;
+}
+
+.dt-embed-provider {
+	display: block;
+	margin-bottom: 8px;
+	color: var(--dt-text-normal);
+}
+
+.dt-embed-author {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 8px;
+	font-size: 0.875rem;
+	font-weight: 600;
+	line-height: 1.125rem;
+}
+
+.dt-embed-author img {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.dt-embed-author a {
+	color: var(--dt-text-normal);
+	text-decoration: none;
+}
+
+.dt-embed-author a:hover {
+	text-decoration: underline;
+}
+
+.dt-embed-title {
+	display: block;
+	margin: 0 0 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	line-height: 1.375rem;
+	color: var(--dt-text-strong);
+	text-decoration: none;
+}
+
+.dt-embed-title--link,
+a.dt-embed-title:hover,
+.dt-embed-title a:hover {
+	text-decoration: underline;
+}
+
+a.dt-embed-title {
+	color: var(--dt-text-link);
+}
+
+.dt-embed-thumbnail {
+	position: absolute;
+	top: 8px;
+	right: 16px;
+	width: 80px;
+	height: 80px;
+	border-radius: var(--dt-radius-sm);
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-embed-thumbnail img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+:where(ded) {
+	display: block;
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+	white-space: pre-line;
+}
+
+:where(defs) {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	gap: 8px;
+	margin-top: 8px;
+}
+
+:where(def) {
+	grid-column: 1 / -1;
+	min-width: 0;
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+}
+
+:where(def[inline]) {
+	grid-column: span 4;
+}
+
+de[thumbnail] :where(def[inline]),
+de[data-dt-thumbnail] :where(def[inline]) {
+	grid-column: span 6;
+}
+
+.dt-embed-field-title {
+	display: block;
+	margin: 0 0 2px;
+	font-weight: 600;
+	color: var(--dt-text-strong);
+}
+
+def:not([data-dt-ready]):not(:has(.dt-embed-field-title))::before {
+	content: attr(field-title);
+	display: block;
+	margin-bottom: 2px;
+	font-weight: 600;
+	color: var(--dt-text-strong);
+}
+
+.dt-embed-image {
+	display: block;
+	margin-top: 16px;
+}
+
+.dt-embed-image img,
+.dt-embed-image video {
+	display: block;
+	max-width: 100%;
+	max-height: 300px;
+	border-radius: var(--dt-radius-sm);
+	object-fit: contain;
+}
+
+:where(defo) {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 8px;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	color: var(--dt-text-muted);
+}
+
+defo:empty::before {
+	content: attr(footer);
+}
+
+.dt-embed-footer-icon {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-embed-footer-icon img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dt-embed-footer-sep {
+	display: inline-block;
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background: var(--dt-text-muted);
+	opacity: 0.6;
+}
+
+/* ==========================================================================
+   12. ATTACHMENTS
+   ========================================================================== */
+
+:where(dats) {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 8px;
+	margin-top: 8px;
+	max-width: 550px;
+}
+
+:where(dats:empty) {
+	display: none;
+}
+
+/* --- images ------------------------------------------------------------- */
+
+:where(dimg) {
+	position: relative;
+	display: block;
+	max-width: 100%;
+	border-radius: var(--dt-radius-md);
+	overflow: hidden;
+	line-height: 0;
+}
+
+:where(dimg) img {
+	display: block;
+	max-width: 100%;
+	max-height: 350px;
+	border-radius: var(--dt-radius-md);
+	object-fit: contain;
+	cursor: pointer;
+}
+
+:where(dimg) a {
+	display: block;
+}
+
+/* Attribute-only form, filled in by JS; visible placeholder if JS never runs. */
+dimg[url]:not([data-dt-ready]):not(:has(img)) {
+	min-width: 220px;
+	min-height: 120px;
+	border: 1px dashed var(--dt-border-strong);
+}
+
+/* --- spoiler-wrapped media --------------------------------------------- */
+
+dimg[spoiler] img,
+dvid[spoiler] video {
+	filter: blur(44px);
+	transition: filter var(--dt-transition);
+}
+
+dimg[spoiler][data-dt-revealed] img,
+dvid[spoiler][data-dt-revealed] video {
+	filter: none;
+}
+
+.dt-spoiler-overlay {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 0;
+	border-radius: var(--dt-radius-md);
+	background: rgba(0, 0, 0, 0.35);
+	color: #ffffff;
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	cursor: pointer;
+}
+
+.dt-spoiler-overlay:hover {
+	background: rgba(0, 0, 0, 0.45);
+}
+
+dimg[data-dt-revealed] > .dt-spoiler-overlay,
+dvid[data-dt-revealed] > .dt-spoiler-overlay {
+	display: none;
+}
+
+/* --- files -------------------------------------------------------------- */
+
+:where(dfil) {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	max-width: 420px;
+	padding: 12px;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-md);
+	background: var(--dt-bg-secondary);
+}
+
+:where(dfil) a {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	color: inherit;
+	text-decoration: none;
+}
+
+/* Attribute-only form: renders name and size with zero JavaScript. */
+dfil:empty {
+	display: grid;
+	grid-template-columns: 30px minmax(0, 1fr);
+	align-content: center;
+	column-gap: 12px;
+}
+
+dfil:empty::before {
+	grid-column: 1;
+	grid-row: 1 / span 2;
+	content: 'FILE';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-modifier-hover);
+	color: var(--dt-text-muted);
+	font-size: 0.5625rem;
+	font-weight: 700;
+}
+
+dfil[type]:empty::before {
+	content: attr(type);
+}
+
+dfil:empty::after {
+	grid-column: 2;
+	content: attr(name) '\A' attr(bytes) ' ' attr(bytes-unit);
+	white-space: pre-line;
+	line-height: 1.25rem;
+}
+
+dfil[bytes='']:empty::after,
+dfil:not([bytes]):empty::after {
+	content: attr(name);
+}
+
+.dt-file-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-modifier-hover);
+	color: var(--dt-text-muted);
+	font-size: 0.5625rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	flex: none;
+}
+
+.dt-file-meta {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.dt-file-name {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--dt-text-strong);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dt-file-size {
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* --- audio / video ------------------------------------------------------ */
+
+:where(daud) {
+	display: block;
+	width: 100%;
+	max-width: 420px;
+}
+
+:where(daud) audio {
+	display: block;
+	width: 100%;
+	max-width: 420px;
+	border-radius: var(--dt-radius-md);
+	outline: none;
+}
+
+:where(dvid) {
+	position: relative;
+	display: block;
+	max-width: 100%;
+	border-radius: var(--dt-radius-md);
+	overflow: hidden;
+	background: #000000;
+	line-height: 0;
+}
+
+:where(dvid) video {
+	display: block;
+	max-width: 100%;
+	max-height: 400px;
+	border-radius: var(--dt-radius-md);
+}
+
+:where(dvid) video:focus-visible,
+:where(daud) audio:focus-visible {
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+/* ==========================================================================
+   13. REACTIONS
+   ========================================================================== */
+
+:where(drs) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px;
+	margin-top: 8px;
+}
+
+:where(drs:empty) {
+	display: none;
+}
+
+:where(dr) {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 36px;
+	height: 24px;
+	padding: 2px 6px;
+	border: 1px solid var(--dt-reaction-border);
+	border-radius: var(--dt-radius-md);
+	background: var(--dt-reaction-bg);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: 0.875rem;
+	line-height: 1;
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+	transition:
+		background var(--dt-transition),
+		border-color var(--dt-transition);
+}
+
+:where(dr:hover) {
+	border-color: var(--dt-border-strong);
+}
+
+:where(dr[reacted]) {
+	background: var(--dt-reaction-bg-reacted);
+	border-color: var(--dt-reaction-border-reacted);
+	color: var(--dt-reaction-text-reacted);
+}
+
+/* Attribute-only form: emoji and count straight from attributes. */
+dr:not([data-dt-ready])::before {
+	content: attr(emoji);
+	font-size: 1rem;
+	line-height: 1;
+}
+
+dr[emoji^='http']:not([data-dt-ready])::before,
+dr[emoji^='data:']:not([data-dt-ready])::before,
+dr[emoji^='blob:']:not([data-dt-ready])::before,
+dr[emoji^='/']:not([data-dt-ready])::before,
+dr[emoji^='./']:not([data-dt-ready])::before,
+dr:not([emoji]):not([data-dt-ready])::before {
+	content: none;
+}
+
+dr:not([data-dt-ready])::after {
+	content: attr(count);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1;
+}
+
+dr:not([count]):not([data-dt-ready])::after,
+dr[count='1']:not([data-dt-ready])::after {
+	content: none;
+}
+
+:where(dr) img,
+.dt-reaction-emoji {
+	display: inline-block;
+	flex: none;
+	width: 1rem;
+	height: 1rem;
+	overflow: hidden;
+	object-fit: contain;
+	vertical-align: middle;
+}
+
+.dt-reaction-count {
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1;
+	color: inherit;
+}
+
+/* ==========================================================================
+   14. ACTION ROW + BUTTONS
+   ========================================================================== */
+
+:where(dar) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-top: 8px;
+	max-width: 600px;
+}
+
+:where(dbtn) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	min-height: 32px;
+	padding: 2px 16px;
+	border: 0;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-button-secondary);
+	color: #ffffff;
+	font-family: var(--dt-font);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1rem;
+	white-space: nowrap;
+	cursor: pointer;
+	transition: background var(--dt-transition);
+}
+
+:where(dbtn):hover {
+	background: var(--dt-button-secondary-hover);
+}
+
+:where(dbtn[type='primary']) {
+	background: var(--dt-button-primary);
+}
+
+:where(dbtn[type='primary']):hover {
+	background: var(--dt-button-primary-hover);
+}
+
+:where(dbtn[type='success']) {
+	background: var(--dt-button-success);
+}
+
+:where(dbtn[type='destructive'], dbtn[type='danger']) {
+	background: var(--dt-button-danger);
+}
+
+:where(dbtn[type='link']) {
+	background: var(--dt-button-link);
+}
+
+:where(dbtn[disabled]) {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.dt-button-emoji {
+	width: 1rem;
+	height: 1rem;
+	object-fit: contain;
+}
+
+.dt-button-link-icon {
+	width: 12px;
+	height: 12px;
+	opacity: 0.9;
+}
+
+/* Verified author tag (used inside author info) */
+:where(dvat) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	height: 16px;
+	padding: 0 5px 0 4px;
+	border-radius: 4px;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 0.625rem;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+	vertical-align: -2px;
+}
+
+:where(dvat)::before {
+	content: '\2713';
+	font-size: 0.75rem;
+	line-height: 1;
+}
+
+:where(dvat:not([verified]))::before {
+	content: none;
+}
+
+:where(dvat)::after {
+	content: 'APP';
+}
+
+/* ==========================================================================
+   15. A11Y + PRINT
+   ========================================================================== */
+
+.dt-divider {
+	height: 1px;
+	margin: 8px 0;
+	border: 0;
+	background: var(--dt-divider);
+}
+
+.dt-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+:where(dm, de, dats, drs) :focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:where(dsp),
+	:where(dr),
+	:where(dbtn),
+	dimg img {
+		transition: none;
+	}
+}
+
+@media (max-width: 480px) {
+	:where(dms) {
+		--dt-msg-padding-right: 16px;
+	}
+
+	:where(de),
+	:where(dats) {
+		max-width: 100%;
+	}
+}
+
+@media print {
+	:root,
+	dms,
+	dm {
+		--dt-bg-primary: #ffffff;
+		--dt-bg-secondary: #f2f3f5;
+		--dt-bg-embed: #f2f3f5;
+		--dt-bg-code: #f2f3f5;
+		--dt-text-normal: #000000;
+		--dt-text-strong: #000000;
+		--dt-text-muted: #444444;
+	}
+
+	:where(dsp) {
+		background: none;
+		color: inherit;
+	}
+
+	.dt-copy,
+	.dt-spoiler-overlay {
+		display: none !important;
+	}
+}