@twango/twiki 0.0.0-stage → 0.1.1

package/site/src/lib/styles/article.css

@@ -0,0 +1,607 @@
+/* ---------------------------------------------------------------------------
+   Prose (markdown) styling
+--------------------------------------------------------------------------- */
+.prose {
+	line-height: 1.6;
+	overflow-wrap: anywhere;
+	--tw-prose-body: var(--color-text);
+	--tw-prose-headings: var(--color-text);
+	--tw-prose-links: var(--color-accent);
+	--tw-prose-bold: var(--color-text);
+	--tw-prose-counters: var(--color-muted);
+	--tw-prose-bullets: var(--color-muted);
+	--tw-prose-hr: var(--color-border);
+	--tw-prose-quotes: var(--color-text);
+	--tw-prose-quote-borders: var(--color-border);
+	--tw-prose-captions: var(--color-muted);
+	--tw-prose-code: var(--color-text);
+	--tw-prose-pre-code: var(--color-text);
+	--tw-prose-pre-bg: var(--color-surface);
+	--tw-prose-th-borders: var(--color-border);
+	--tw-prose-td-borders: var(--color-border);
+}
+
+/* Compact reading rhythm; controls and metadata do not inherit paragraph gaps. */
+.prose :where(p, ul, ol) {
+	margin-block: 0.875rem;
+}
+.prose :where(li) {
+	margin-block: 0.25rem;
+}
+.prose :where(li > p) {
+	margin-block: 0.375rem;
+}
+.prose :where(h1) {
+	margin-block: 0 1rem;
+	line-height: 1.15;
+}
+.prose :where(h2) {
+	margin-block: 2rem 0.75rem;
+}
+.prose :where(h3, h4, h5, h6) {
+	margin-block: 1.5rem 0.5rem;
+}
+.prose .doc-meta {
+	margin: -0.375rem 0 1.25rem;
+}
+.prose .doc-meta p {
+	margin: 0;
+	line-height: 1.5;
+}
+.prose .callout-content-inner > :last-child {
+	margin-bottom: 0.75rem;
+}
+@media (width < 640px) {
+	.prose :where(h1) {
+		font-size: 2rem;
+	}
+}
+
+/* Match twango.dev's heading weight: semibold + tight tracking (Tailwind
+   Typography defaults to 700–800, which reads too heavy with Overused Grotesk). */
+.prose :where(h1, h2, h3, h4, h5, h6) {
+	font-weight: 600;
+	letter-spacing: -0.025em;
+}
+
+.prose :where(h2, h3, h4) {
+	scroll-margin-top: 5rem;
+}
+
+.prose .heading-anchor {
+	position: absolute;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.1em;
+	height: 1.1em;
+	margin-left: 0.35em;
+	vertical-align: -0.08em;
+	color: var(--color-muted);
+	opacity: 0;
+	transition:
+		opacity 150ms ease,
+		color 150ms ease;
+}
+.prose :where(h1, h2, h3, h4, h5, h6) {
+	position: relative;
+}
+.prose :where(h1, h2, h3, h4, h5, h6):hover > .heading-anchor,
+.prose .heading-anchor:focus-visible {
+	opacity: 1;
+}
+.prose .heading-anchor:hover {
+	color: var(--color-accent);
+}
+.prose .heading-anchor:focus-visible {
+	border-radius: 0.2em;
+	outline: 2px solid var(--color-accent);
+	outline-offset: 2px;
+}
+.prose .heading-anchor svg {
+	width: 0.8em;
+	height: 0.8em;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+@media (hover: none) {
+	.prose .heading-anchor {
+		opacity: 0.65;
+	}
+}
+
+.prose :where(code):not(:where(pre code)) {
+	font-family: var(--font-mono);
+	font-size: 0.875em;
+	padding: 0.15em 0.4em;
+	border-radius: 0.25rem;
+	background-color: var(--color-surface);
+}
+
+/* tailwind-typography wraps inline code in literal backticks; Quartz never
+   showed them and this corpus has thousands of inline code chips — drop them. */
+.prose :where(code)::before,
+.prose :where(code)::after {
+	content: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Shiki code blocks + copy button
+--------------------------------------------------------------------------- */
+.prose .code-block {
+	position: relative;
+}
+
+.prose pre.shiki {
+	margin: 1.25rem 0;
+	border: 1px solid var(--color-border);
+	border-radius: 0.5rem;
+	background-color: var(--color-surface) !important;
+	padding: 0.9rem 1.1rem;
+	overflow-x: auto;
+	font-family: var(--font-mono);
+	font-size: 0.8125rem;
+	line-height: 1.6;
+}
+
+.prose pre.shiki code {
+	background: none;
+}
+
+/* Dark theme: swap Shiki's CSS variables. */
+:root.dark .prose pre.shiki,
+:root.dark .prose pre.shiki span {
+	color: var(--shiki-dark) !important;
+}
+
+.prose .copy-button {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.75rem;
+	height: 1.75rem;
+	border: 1px solid var(--color-border);
+	border-radius: 0.375rem;
+	background-color: var(--color-bg);
+	color: var(--color-muted);
+	cursor: pointer;
+	opacity: 0;
+	transition:
+		opacity 150ms ease,
+		color 150ms ease;
+}
+
+.prose .code-block:hover .copy-button,
+.prose .copy-button:focus-visible,
+.prose .copy-button.copied {
+	opacity: 1;
+}
+
+.prose .copy-button:hover {
+	color: var(--color-text);
+}
+
+@media (hover: none) {
+	.prose .copy-button {
+		opacity: 1;
+	}
+}
+
+/* ---------------------------------------------------------------------------
+   Callouts — the Quartz fork's DOM structure (blockquote.callout >
+   .callout-title + .callout-content > .callout-content-inner) restyled to the
+   flat cca admonition aesthetic: 1px border-border, 4px left accent,
+   rounded-lg, surface bg. Icons + per-type palette ported from
+   quartz/styles/callouts.scss; collapse is the fork's grid-template-rows
+   animation, driven purely by the .is-collapsed class (tiny hydration in
+   enhancements.ts toggles it).
+--------------------------------------------------------------------------- */
+.prose blockquote.callout {
+	margin: 1.25rem 0;
+	border: 1px solid var(--color-border);
+	border-left: 4px solid var(--callout-color, var(--color-accent));
+	border-radius: 0.5rem;
+	background-color: var(--color-surface);
+	padding: 0 1rem;
+	overflow-y: hidden;
+	/* undo tailwind-typography blockquote styling */
+	font-style: normal;
+	font-weight: inherit;
+	quotes: none;
+	color: inherit;
+}
+.prose blockquote.callout p:first-of-type::before,
+.prose blockquote.callout p:last-of-type::after {
+	content: none;
+}
+
+.prose .callout-title {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.4rem;
+	padding: 0.75rem 0;
+	color: var(--callout-color, var(--color-accent));
+	--icon-size: 18px;
+}
+.prose .callout-title-inner {
+	font-weight: 600;
+}
+.prose .callout-title-inner > p {
+	margin: 0;
+	color: var(--callout-color, var(--color-accent));
+}
+
+.prose .callout-icon,
+.prose .fold-callout-icon {
+	width: var(--icon-size);
+	height: var(--icon-size);
+	flex: 0 0 var(--icon-size);
+	background-color: var(--callout-color, var(--color-accent));
+	mask-image: var(--callout-icon);
+	mask-size: var(--icon-size) var(--icon-size);
+	mask-position: center;
+	mask-repeat: no-repeat;
+	margin-top: 0.2rem;
+}
+.prose .fold-callout-icon {
+	transition: transform 0.15s ease;
+	opacity: 0.8;
+	cursor: pointer;
+	--callout-icon: var(--callout-icon-fold);
+	margin-left: auto;
+}
+.prose blockquote.callout.is-collapsed > .callout-title > .fold-callout-icon {
+	transform: rotateZ(-90deg);
+}
+.prose blockquote.callout.is-collapsible > .callout-title {
+	cursor: pointer;
+}
+
+/* grid-collapse animation (fork's callout-content / callout-content-inner) */
+.prose blockquote.callout > .callout-content {
+	display: grid;
+	grid-template-rows: 1fr;
+	transition: grid-template-rows 0.3s ease;
+}
+.prose blockquote.callout.is-collapsed > .callout-content {
+	grid-template-rows: 0fr;
+}
+.prose .callout-content-inner {
+	overflow: hidden;
+}
+.prose .callout-content-inner > :first-child {
+	margin-top: 0;
+}
+
+/* Per-type icon set + palette (ported from quartz/styles/callouts.scss). */
+.prose blockquote.callout {
+	--callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
+	--callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
+	--callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
+	--callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>');
+	--callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>');
+	--callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+	--callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
+	--callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
+	--callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+	--callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>');
+	--callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>');
+	--callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>');
+	--callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>');
+	--callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
+
+	--callout-color: #448aff;
+	--callout-icon: var(--callout-icon-note);
+}
+.prose blockquote.callout[data-callout='abstract'] {
+	--callout-color: #00b0ff;
+	--callout-icon: var(--callout-icon-abstract);
+}
+.prose blockquote.callout[data-callout='info'] {
+	--callout-color: #00b8d4;
+	--callout-icon: var(--callout-icon-info);
+}
+.prose blockquote.callout[data-callout='todo'] {
+	--callout-color: #00b8d4;
+	--callout-icon: var(--callout-icon-todo);
+}
+.prose blockquote.callout[data-callout='tip'] {
+	--callout-color: #00bfa5;
+	--callout-icon: var(--callout-icon-tip);
+}
+.prose blockquote.callout[data-callout='success'] {
+	--callout-color: #09ad7a;
+	--callout-icon: var(--callout-icon-success);
+}
+.prose blockquote.callout[data-callout='question'] {
+	--callout-color: #dba642;
+	--callout-icon: var(--callout-icon-question);
+}
+.prose blockquote.callout[data-callout='warning'] {
+	--callout-color: #db8942;
+	--callout-icon: var(--callout-icon-warning);
+}
+.prose blockquote.callout[data-callout='failure'],
+.prose blockquote.callout[data-callout='danger'],
+.prose blockquote.callout[data-callout='bug'] {
+	--callout-color: #db4242;
+	--callout-icon: var(--callout-icon-failure);
+}
+.prose blockquote.callout[data-callout='bug'] {
+	--callout-icon: var(--callout-icon-bug);
+}
+.prose blockquote.callout[data-callout='danger'] {
+	--callout-icon: var(--callout-icon-danger);
+}
+.prose blockquote.callout[data-callout='example'] {
+	--callout-color: #7a43b5;
+	--callout-icon: var(--callout-icon-example);
+}
+.prose blockquote.callout[data-callout='quote'] {
+	--callout-color: var(--color-muted);
+	--callout-icon: var(--callout-icon-quote);
+}
+
+/* ---------------------------------------------------------------------------
+   Transclusions (![[note]] -> blockquote.transclude, inlined at build time)
+--------------------------------------------------------------------------- */
+.prose blockquote.transclude {
+	font-style: normal;
+	font-weight: inherit;
+	quotes: none;
+}
+.prose blockquote.transclude p:first-of-type::before,
+.prose blockquote.transclude p:last-of-type::after {
+	content: none;
+}
+.prose a.transclude-src {
+	display: block;
+	margin-top: 0.5rem;
+	font-size: 0.8125rem;
+	color: var(--color-muted);
+}
+.prose a.transclude-src:hover {
+	color: var(--color-accent);
+}
+
+/* ---------------------------------------------------------------------------
+   Internal, external, and tag links
+--------------------------------------------------------------------------- */
+.prose a.internal.broken {
+	opacity: 0.5;
+	transition: opacity 0.2s ease;
+}
+.prose a.internal.broken:hover {
+	opacity: 0.8;
+}
+.prose a.tag-link::before {
+	content: '#';
+}
+.prose a.external .external-icon {
+	display: inline-block;
+	height: 0.8em;
+	width: 0.8em;
+	margin: 0 0.15em;
+}
+.prose a.external .external-icon > path {
+	fill: currentColor;
+}
+
+/* ---------------------------------------------------------------------------
+   OFM odds and ends: ==highlights==, embeds, KaTeX, checkboxes, mermaid
+--------------------------------------------------------------------------- */
+.prose .text-highlight {
+	background-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
+	padding: 0 0.1rem;
+	border-radius: 0.25rem;
+}
+
+.prose iframe.pdf,
+.prose iframe.external-embed.youtube {
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--color-border);
+	border-radius: 0.5rem;
+	background-color: var(--color-surface);
+}
+
+.prose .katex-display {
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding: 0.25rem 0;
+}
+
+.prose input[type='checkbox'] {
+	accent-color: var(--color-accent);
+	cursor: pointer;
+}
+.prose input[type='checkbox'][disabled] {
+	cursor: default;
+}
+.prose li:has(> input[type='checkbox']:first-child) {
+	list-style: none;
+}
+.prose li > input[type='checkbox']:first-child {
+	margin-right: 0.4em;
+	margin-left: -1.4em;
+}
+
+/* Mermaid fences: styled raw-source fallback until the Islands phase hydrates
+   them into rendered diagrams. */
+.prose pre:has(> code.mermaid) {
+	margin: 1.25rem 0;
+	border: 1px dashed var(--color-border);
+	border-radius: 0.5rem;
+	background-color: var(--color-surface);
+	padding: 0.9rem 1.1rem;
+	overflow-x: auto;
+	font-family: var(--font-mono);
+	font-size: 0.8125rem;
+	line-height: 1.6;
+}
+.prose pre > code.mermaid {
+	background: none;
+}
+
+/* Hydrated mermaid island (embeds/mermaid.ts): rendered SVG container that
+   replaces the raw-source <pre> once the diagram draws; the <pre> dims while
+   the lazy import is in flight and stays visible on render failure. */
+.prose pre:has(> code.mermaid)[data-state='loading'] {
+	opacity: 0.6;
+}
+.prose .mermaid-diagram {
+	margin: 1.25rem 0;
+	position: relative;
+	overflow-x: auto;
+}
+.prose .mermaid-inline-content {
+	display: flex;
+	justify-content: center;
+	min-width: max-content;
+}
+.prose .mermaid-inline-content > svg {
+	max-width: 100%;
+	height: auto;
+}
+.prose .mermaid-inline-content > .mermaid-error {
+	margin: 0;
+	width: 100%;
+	border: 1px solid var(--color-border);
+	border-radius: 0.5rem;
+	padding: 0.5rem 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--color-muted);
+}
+
+.mermaid-toolbar {
+	position: sticky;
+	right: 0.5rem;
+	bottom: 0.5rem;
+	display: flex;
+	float: right;
+	gap: 0.35rem;
+	width: max-content;
+	margin-top: -2.35rem;
+	opacity: 0;
+	transition: opacity 150ms ease;
+}
+.mermaid-diagram:hover .mermaid-toolbar,
+.mermaid-toolbar:focus-within {
+	opacity: 1;
+}
+.mermaid-control-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 2rem;
+	height: 2rem;
+	padding: 0 0.5rem;
+	border: 1px solid var(--color-border);
+	border-radius: 0.375rem;
+	background: var(--color-bg);
+	color: var(--color-muted);
+	font: 500 0.75rem/1 var(--font-sans);
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+}
+.mermaid-control-button:hover,
+.mermaid-control-button:focus-visible,
+.mermaid-control-button.copied {
+	color: var(--color-text);
+	border-color: var(--color-accent);
+	outline: none;
+}
+.mermaid-control-button:focus-visible {
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent);
+}
+.mermaid-control-button:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.mermaid-control-button svg {
+	width: 0.9rem;
+	height: 0.9rem;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+body.mermaid-modal-open {
+	overflow: hidden;
+}
+.mermaid-modal {
+	position: fixed;
+	inset: 0;
+	z-index: 80;
+	display: grid;
+	place-items: center;
+	padding: 3vh 3vw;
+	background: rgb(0 0 0 / 60%);
+	backdrop-filter: blur(4px);
+}
+.mermaid-modal-panel {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	width: min(90vw, 90rem);
+	height: 88vh;
+	overflow: hidden;
+	border: 1px solid var(--color-border);
+	border-radius: 0.75rem;
+	background: var(--color-bg);
+	box-shadow: 0 24px 64px rgb(0 0 0 / 35%);
+}
+.mermaid-modal-controls {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.4rem;
+	padding: 0.65rem;
+	border-bottom: 1px solid var(--color-border);
+}
+.mermaid-modal-viewport {
+	display: grid;
+	place-items: center;
+	min-height: 0;
+	overflow: hidden;
+	cursor: grab;
+	touch-action: none;
+	user-select: none;
+}
+.mermaid-modal-viewport.is-dragging {
+	cursor: grabbing;
+}
+.mermaid-modal-content {
+	transform-origin: center;
+	will-change: transform;
+}
+.mermaid-modal-content > svg {
+	display: block;
+	max-width: 82vw;
+	max-height: 76vh;
+	height: auto;
+}
+
+@media (hover: none) {
+	.mermaid-toolbar {
+		opacity: 1;
+	}
+}
+
+@media (max-width: 640px) {
+	.mermaid-modal {
+		padding: 2vw;
+	}
+	.mermaid-modal-panel {
+		width: 96vw;
+		height: 92vh;
+	}
+}