/* 
  Iandara Markdownup Unified Theme (Dadois)
  Shared aesthetics for Markdown rendering and interactive components.
*/
@font-face {
	font-family: Geosans;
	src: url('https://cdn.iandara.com/ttf/geosans-normal') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: Geosans;
	src: url('https://cdn.iandara.com/ttf/geosans-oblique') format('truetype');
	font-weight: normal;
	font-style: oblique;
}
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #141414;
	--bg-card: #1f1f1f;
	--bg-code: #161616;
	--text: #e5e5e5;
	--text-muted: rgb(255 255 255 / 60%);
	--text-dim: rgb(255 255 255 / 40%);
	--text-faint: rgb(255 255 255 / 30%);
	--border: rgb(255 255 255 / 10%);
	--border-strong: #333;
	--accent: #4da6ff;
	--error: #f87171;
	--error-bg: rgb(248 113 113 / 10%);
	--error-border: rgb(248 113 113 / 20%);
	--mono: 'JetBrains Mono', ui-monospace, sfmono-regular, monospace;
	--sans: 'Geosans', ui-sans-serif, system-ui, sans-serif;
}
html {
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	font-family: var(--sans);
	color: var(--text);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgb(255 255 255 / 10%);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgb(255 255 255 / 20%);
}
* {
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 10%) transparent;
}
/* ── VIEWS ── */
.view {
	display: none;
}
.view.active {
	display: flex;
}
/* ── HOME ── */
#view-home {
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	min-height: 100vh;
	flex-direction: column;
}
.home-inner {
	display: flex;
	width: 100%;
	max-width: 42rem;
	flex-direction: column;
	gap: 3rem;
}
.home-header {
	display: flex;
	text-align: center;
	flex-direction: column;
	gap: 1.5rem;
}
.home-title {
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	font-weight: normal;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.home-quote {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--text-muted);
	font-style: oblique;
}
.home-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--text-dim);
	font-style: normal;
}
/* Input card */
.input-card-wrap {
	position: relative;
}
.input-card-glow {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(255 255 255 / 5%), rgb(255 255 255 / 10%));
	border-radius: 1rem;
	filter: blur(20px);
	opacity: 0.5;
	transition: filter 0.3s;
	pointer-events: none;
}
.input-card-wrap:hover .input-card-glow {
	filter: blur(30px);
}
.input-card {
	position: relative;
	display: flex;
	padding: 1rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
	flex-direction: column;
	gap: 1rem;
}
.input-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.input-icon {
	margin-top: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--text-dim);
	flex-shrink: 0;
}
textarea {
	padding-top: 0.5rem;
	min-height: 7.5rem;
	font-family: var(--mono);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--text);
	background: transparent;
	border: none;
	flex: 1;
	outline: none;
	resize: vertical;
}
textarea::placeholder {
	color: var(--text-faint);
}
.input-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.6rem;
}
.btn-view {
	padding: 0.75rem 2rem;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
	background: #fff;
	border: none;
	border-radius: 0.75rem;
	transition: background 0.15s;
	letter-spacing: 0.1em;
	cursor: pointer;
}
.btn-view:hover {
	background: rgb(255 255 255 / 90%);
}
/* File picker button */
.btn-file-label {
	display: flex;
	align-items: center;
	padding: 0.72rem 1.2rem;
	font-family: var(--sans);
	font-size: 0.9rem;
	text-transform: uppercase;
	color: rgb(255 255 255 / 60%);
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 0.75rem;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
	gap: 0.45em;
	letter-spacing: 0.06em;
	cursor: pointer;
	user-select: none;
}
.btn-file-label:hover {
	color: #fff;
	background: rgb(255 255 255 / 13%);
	border-color: rgb(255 255 255 / 22%);
}
.btn-file-label svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
#file-input {
	display: none;
}
/* Processing overlay on home view */
#processing-overlay {
	position: absolute;
	z-index: 10;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgb(20 20 20 / 85%);
	border-radius: inherit;
	inset: 0;
	backdrop-filter: blur(6px);
	flex-direction: column;
	gap: 1rem;
}
#processing-overlay.active {
	display: flex;
}
.processing-spinner {
	width: 2rem;
	height: 2rem;
	border: 2px solid rgb(255 255 255 / 15%);
	border-top-color: rgb(255 255 255 / 70%);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.processing-label {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 50%);
}
/* Error */
.error-box {
	display: none;
	align-items: center;
	padding: 1rem;
	color: var(--error);
	background: var(--error-bg);
	border: 1px solid var(--error-border);
	border-radius: 0.75rem;
	gap: 0.75rem;
}
.error-box.visible {
	display: flex;
}
.error-box svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}
/* ── DOCUMENT VIEW ── */
#view-doc {
	flex-direction: column;
	min-height: 100vh;
}
header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	background: rgb(20 20 20 / 80%);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgb(255 255 255 / 5%);
}
.header-title {
	font-size: 1.1rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
.btn-new {
	font-family: var(--sans);
	font-size: 0.8rem;
	text-transform: uppercase;
	color: var(--text-muted);
	background: none;
	border: none;
	transition: color 0.15s;
	letter-spacing: 0.1em;
	cursor: pointer;
}
.btn-new:hover {
	color: var(--text);
}
main {
	margin: 0 auto;
	padding: 2.5rem 1.5rem 5rem;
	width: 100%;
	max-width: 56rem;
}
/* Standard doc-main for result views */
.doc-main {
	margin: 0 auto;
	padding: 2.5rem 1.5rem 5rem;
	width: 100%;
	max-width: 60rem;
}
/* Standard doc-output for main results (code, canvas, etc) */
.doc-output {
	display: block;
	overflow-x: auto;
	margin: 0 auto;
	padding: 1.5rem;
	font-family: var(--mono);
	font-size: 1rem;
	line-height: 1.5;
	color: #d4d4d4;
	background: #1e1e1e;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}
/* QR/Canvas specific output tweaks */
canvas.doc-output {
	padding: 0;
	max-width: 100%;
	height: auto;
	background: #fff; /* QR codes often need white BG */
	border: 2px solid #222;
	image-rendering: crisp-edges;
}
/* Doc info and warnings */
.doc-info {
	margin-top: 1rem;
	font-size: 0.95rem;
	text-align: center;
	color: var(--text-muted);
	opacity: 0.8;
}
.doc-warning {
	font-weight: 500;
	color: #f0a500;
}
/* Utility for transparent HLJS code blocks */
.hljs-transparent {
	padding: 0 !important;
	background: transparent !important;
}
/* ── FAB CLUSTER ── */
#fab-cluster {
	position: fixed;
	right: 1rem;
	bottom: 1.75rem;
	z-index: 100;
	display: none;
	align-items: center;
	opacity: 1;
	transition: opacity 0.5s ease;
	flex-direction: column;
	gap: 0.55rem;
}
#fab-cluster.visible {
	display: flex;
}
#fab-cluster.idle {
	opacity: 0.08;
	pointer-events: none;
}
/* Individual FAB — icon-only circle */
.fab {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.6rem;
	height: 2.6rem;
	color: rgb(255 255 255 / 50%);
	background: rgb(22 22 22 / 92%);
	border: 1px solid rgb(255 255 255 / 11%);
	border-radius: 50%;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s,
		transform 0.15s,
		box-shadow 0.15s;
	cursor: pointer;
	backdrop-filter: blur(16px);
	box-shadow:
		0 4px 20px rgb(0 0 0 / 55%),
		0 1px 0 rgb(255 255 255 / 4%) inset;
	user-select: none;
	flex-shrink: 0;
}
.fab:hover {
	color: #fff;
	background: rgb(42 42 42 / 97%);
	border-color: rgb(255 255 255 / 22%);
	transform: scale(1.1);
	box-shadow:
		0 6px 28px rgb(0 0 0 / 65%),
		0 1px 0 rgb(255 255 255 / 6%) inset;
}
.fab:active {
	transform: scale(0.95);
}
.fab svg {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
}
.fab:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
/* Help FAB active state */
#fab-help.help-active {
	color: rgb(255 255 255 / 90%);
	border-color: rgb(255 255 255 / 30%);
	background: rgb(50 50 50 / 95%);
}
/* Font size group */
#fab-font-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}
.fab-font-size-label {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: rgb(255 255 255 / 30%);
	transition: color 0.15s;
	letter-spacing: 0.1em;
}
#fab-font-group:has(.fab:hover) .fab-font-size-label {
	color: rgb(255 255 255 / 55%);
}
/* Divider between groups */
.fab-divider {
	width: 1px;
	height: 1.25rem;
	background: rgb(255 255 255 / 8%);
}
/* Feedback flash */
.fab.flash {
	color: #6ee7b7 !important;
	border-color: rgb(110 231 183 / 45%) !important;
	background: rgb(110 231 183 / 10%) !important;
}
.fab.flash-error {
	color: var(--error) !important;
	border-color: var(--error-border) !important;
}
/* Scroll-to-top — hidden until scrolled */
#fab-top {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity 0.25s,
		transform 0.25s,
		background 0.15s,
		color 0.15s,
		border-color 0.15s,
		box-shadow 0.15s;
}
#fab-top.show {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
/* Tooltip */
.fab[data-tip]::after {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.65rem);
	padding: 0.28em 0.7em;
	font-family: var(--sans);
	font-size: 0.62rem;
	text-transform: uppercase;
	color: rgb(255 255 255 / 65%);
	background: rgb(8 8 8 / 94%);
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 6px;
	opacity: 0;
	transition: opacity 0.15s 0.3s;
	content: attr(data-tip);
	transform: translateY(-50%);
	letter-spacing: 0.1em;
	white-space: nowrap;
	pointer-events: none;
}
.fab[data-tip]:hover::after {
	opacity: 1;
	transition-delay: 0.3s;
}
/* help-on: show all tooltips immediately */
#fab-cluster.help-on .fab[data-tip]::after {
	opacity: 1;
	transition: opacity 0.2s 0s;
}
#fab-cluster.help-on #fab-top:not(.show)[data-tip]::after {
	opacity: 0;
}
/* ── MARKDOWN BODY ── */
.markdown-body {
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.7;
}
.markdown-body ::selection {
	background: rgb(255 255 255 / 20%);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
	margin-top: 2em;
	margin-bottom: 0.75em;
	font-weight: normal;
	line-height: 1.3;
	color: #fff;
	letter-spacing: 0.04em;
}
.markdown-body h1 {
	padding-bottom: 0.3em;
	font-size: 2.5rem;
	border-bottom: 1px solid var(--border-strong);
}
.markdown-body h2 {
	padding-bottom: 0.3em;
	font-size: 2rem;
	border-bottom: 1px solid var(--border-strong);
}
.markdown-body h3 {
	font-size: 1.5rem;
}
.markdown-body h4 {
	font-size: 1.25rem;
}
.markdown-body h5 {
	font-size: 1.1rem;
}
.markdown-body h6 {
	font-size: 1rem;
	color: var(--text-muted);
}
.markdown-body p {
	margin-top: 0;
	margin-bottom: 1em;
}
.markdown-body a {
	color: var(--accent);
	text-decoration: none;
}
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	transition: opacity 0.15s;
}
.markdown-body h1:first-child,
.markdown-body h2:first-child {
	margin-top: 0;
}
.markdown-body a:hover {
	text-decoration: underline;
}
.markdown-body strong {
	font-weight: bold;
	color: #fff;
}
.markdown-body em {
	font-style: oblique;
}
.markdown-body del {
	opacity: 0.5;
}
.markdown-body code {
	padding: 0.2em 0.45em;
	font-family: var(--mono);
	font-size: 0.85em;
	color: #ffb86c;
	background-color: rgb(255 255 255 / 6%);
	border-radius: 4px;
}
.markdown-body pre {
	overflow: auto;
	margin-bottom: 1.5em;
	padding: 1.25em !important;
	background-color: var(--bg-code) !important;
	border: 1px solid rgb(255 255 255 / 5%) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
}
.markdown-body pre code {
	padding: 0 !important;
	font-size: 0.9em;
	line-height: 1.6;
	color: var(--text) !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}
/* Chevron icon inline with heading */
.collapse-chevron {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-top: 0.15em;
	width: 0.85em;
	height: 0.85em;
	color: inherit;
	opacity: 0.22;
	transition:
		opacity 0.15s,
		transform 0.22s ease;
	flex-shrink: 0;
}
.collapse-chevron svg {
	width: 100%;
	height: 100%;
}
/* Collapsed state */
.collapsible-section.is-collapsed .collapse-chevron {
	transform: rotate(-90deg);
	opacity: 0.4;
}
/* The animated body — CSS grid trick */
.collapsible-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.26s ease;
}
.collapsible-section.is-collapsed .collapsible-body {
	grid-template-rows: 0fr;
}
.collapsible-inner {
	overflow: hidden;
	padding-bottom: 0.01px; /* prevent margin collapse bleed */
}
/* Collapsed heading dims slightly */
.collapsible-section.is-collapsed > h2,
.collapsible-section.is-collapsed > h3,
.collapsible-section.is-collapsed > h4 {
	margin-bottom: 0.4em;
	opacity: 0.55;
}
/* Heading text takes remaining space */
.collapse-heading-text {
	flex: 1;
	min-width: 0;
}
/* Override hljs background */
.hljs {
	padding: 0 !important;
	background: transparent !important;
}
.markdown-body blockquote {
	margin: 0 0 1.25em;
	padding: 0.85em 1.1em 0.85em 1.25em;
	color: var(--text);
	border-left: 3px solid var(--border-strong);
	font-style: normal;
	background: rgb(255 255 255 / 3%);
	border-radius: 0 8px 8px 0;
}
.markdown-body blockquote p {
	margin-bottom: 0;
}
/* Hint callout — blockquote starting with 💡 */
.markdown-body blockquote.hint-callout {
	padding: 0.9em 1.2em;
	background: rgb(255 214 0 / 5%);
	border-radius: 0 8px 8px 0;
	border-left: 3px solid rgb(255 214 0 / 50%);
}
.markdown-body blockquote.hint-callout p:first-child {
	margin-bottom: 0.5em;
	font-size: 0.9rem;
	font-weight: normal;
	text-transform: uppercase;
	color: #ffd600;
	letter-spacing: 0.08em;
}
/* <small> inside blockquote — legible body text */
.markdown-body blockquote small {
	display: block;
	font-family: var(--mono);
	font-size: 0.92rem;
	line-height: 1.7;
	color: #c8c8c8;
	font-style: normal;
	white-space: pre-wrap;
}
/* inline code inside hint */
.markdown-body blockquote small code {
	font-size: 0.85em;
	color: #ffb86c;
	background: rgb(255 255 255 / 7%);
}
.markdown-body ul,
.markdown-body ol {
	margin-top: 0;
	margin-bottom: 1em;
	padding-left: 2em;
}
.markdown-body li {
	margin-bottom: 0.25em;
}
.markdown-body li > ul,
.markdown-body li > ol {
	margin-top: 0.25em;
	margin-bottom: 0;
}
/* Task list */
.markdown-body input[type='checkbox'] {
	margin-right: 0.4em;
	accent-color: #fff;
}
.markdown-body hr {
	margin: 2em 0;
	border: none;
	border-top: 1px solid var(--border-strong);
}
.markdown-body table {
	margin-bottom: 1.5em;
	width: 100%;
	font-size: 0.95em;
	border-collapse: collapse;
}
.markdown-body table th,
.markdown-body table td {
	padding: 0.5em 1em;
	text-align: left;
	border: 1px solid var(--border-strong);
}
.markdown-body table th {
	font-weight: normal;
	color: #fff;
	background-color: var(--bg-card);
	letter-spacing: 0.05em;
}
.markdown-body table tr:nth-child(even) td {
	background: rgb(255 255 255 / 2%);
}
.markdown-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
}
.markdown-body details {
	overflow: hidden;
	margin-bottom: 1em;
	padding: 0;
	background-color: rgb(255 255 255 / 2%);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: 8px;
}
.markdown-body summary {
	display: flex;
	align-items: center;
	padding: 0.65em 1em;
	font-weight: normal;
	color: #e5e5e5;
	transition: background-color 0.15s;
	cursor: pointer;
	list-style: none;
	gap: 0.5em;
	user-select: none;
}
.markdown-body summary:hover {
	background-color: rgb(255 255 255 / 5%);
}
.markdown-body summary::-webkit-details-marker {
	display: none;
}
.markdown-body summary::before {
	content: '▶';
	font-size: 0.65em;
	color: rgb(255 255 255 / 40%);
	transition: transform 0.2s;
	flex-shrink: 0;
}
.markdown-body details[open] > summary {
	border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.markdown-body details[open] > summary::before {
	transform: rotate(90deg);
}
.markdown-body details > *:not(summary) {
	padding: 1em 1em 0.25em;
}
/* Mermaid */
/* ── MERMAID DIAGRAMS ── */
.mermaid-wrap {
	position: relative;
	overflow: hidden;
	margin: 2rem 0;
	background: #f8f8f8;
	border: 1px solid rgb(255 255 255 / 6%);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgb(0 0 0 / 25%);
}
/* Diagram viewport — clips pan/zoom */
.mermaid-viewport {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 1.5rem 2rem;
	min-height: 120px;
	cursor: grab;
	user-select: none;
}
.mermaid-viewport.dragging {
	cursor: grabbing;
}
/* The SVG itself — transformed for zoom/pan */
.mermaid-viewport svg {
	display: block;
	max-width: none; /* allow zoom beyond container */
	transition: transform 0.08s ease;
	transform-origin: center center;
}
/* Toolbar */
.mermaid-toolbar {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	display: flex;
	align-items: center;
	padding: 0.25rem 0.3rem;
	background: rgb(20 20 20 / 75%);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: 8px;
	opacity: 0;
	transition: opacity 0.18s;
	gap: 0.2rem;
	backdrop-filter: blur(10px);
	pointer-events: none;
}
.mermaid-wrap:hover .mermaid-toolbar {
	opacity: 1;
	pointer-events: auto;
}
.mermaid-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.85rem;
	height: 1.85rem;
	color: rgb(255 255 255 / 65%);
	background: transparent;
	border: none;
	border-radius: 5px;
	transition:
		background 0.12s,
		color 0.12s;
	cursor: pointer;
}
.mermaid-btn:hover {
	color: #fff;
	background: rgb(255 255 255 / 12%);
}
.mermaid-btn svg {
	width: 1rem;
	height: 1rem;
}
.mermaid-btn-sep {
	margin: 0 0.1rem;
	width: 1px;
	height: 1rem;
	background: rgb(255 255 255 / 15%);
}
.mermaid-zoom-label {
	padding: 0 0.2rem;
	min-width: 2.2rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	text-align: center;
	color: rgb(255 255 255 / 45%);
	letter-spacing: 0.04em;
}
.mermaid-error {
	padding: 1rem;
	font-family: var(--mono);
	font-size: 0.85em;
	color: var(--error);
}
/* ── FULLSCREEN MODAL ── */
#mermaid-modal {
	position: fixed;
	z-index: 1000;
	display: none;
	background: rgb(6 6 6 / 95%);
	inset: 0;
	backdrop-filter: blur(8px);
	flex-direction: column;
}
#mermaid-modal.open {
	display: flex;
}
#mermaid-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgb(255 255 255 / 7%);
	flex-shrink: 0;
}
#mermaid-modal-controls {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
#mermaid-modal-zoom-label {
	min-width: 2.8rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	text-align: center;
	color: rgb(255 255 255 / 40%);
}
.modal-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.1rem;
	height: 2.1rem;
	color: rgb(255 255 255 / 60%);
	background: rgb(255 255 255 / 6%);
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 7px;
	transition:
		background 0.12s,
		color 0.12s;
	cursor: pointer;
}
.modal-btn:hover {
	color: #fff;
	background: rgb(255 255 255 / 14%);
}
.modal-btn svg {
	width: 1rem;
	height: 1rem;
}
.modal-btn-sep {
	margin: 0 0.2rem;
	width: 1px;
	height: 1.2rem;
	background: rgb(255 255 255 / 10%);
}
#modal-hint {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	color: rgb(255 255 255 / 20%);
	letter-spacing: 0.06em;
}
#mermaid-modal-viewport {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #f0f0f0;
	flex: 1;
	cursor: grab;
	user-select: none;
}
#mermaid-modal-svg-wrap {
	padding: 2rem 2.5rem;
	line-height: 0;
	background: #f8f8f8;
	border-radius: 8px;
	transform-origin: center center;
	box-shadow: 0 8px 40px rgb(0 0 0 / 35%);
}
.modal-hint-item {
	display: flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 0.62rem;
	text-transform: uppercase;
	gap: 0.3em;
	letter-spacing: 0.07em;
}
.modal-hint-item svg {
	width: 0.85rem;
	height: 0.85rem;
	opacity: 0.5;
	flex-shrink: 0;
}
#mermaid-modal-viewport.dragging {
	cursor: grabbing;
}
.mermaid-viewport.dragging svg {
	transition: none;
}
#mermaid-modal-svg-wrap svg {
	display: block;
	max-width: none;
}
.modal-hint-sep {
	width: 1px;
	height: 0.9rem;
	background: rgb(255 255 255 / 12%);
}
@media (width <= 640px) {
	main {
		padding: 1.5rem 1rem 4rem;
	}
	.markdown-body {
		font-size: 1rem;
	}
	.markdown-body h2 {
		font-size: 1.5rem;
	}
	.markdown-body h3 {
		font-size: 1.25rem;
	}
}
/* ── PRINT / PDF ── */
@media print {
	#fab-cluster,
	header {
		display: none !important;
	}
	body {
		color: #111 !important;
		background: #fff !important;
	}
	main {
		padding: 0 !important;
		max-width: 100% !important;
	}
	/* Avoid breaking headings and code blocks across pages */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		break-after: avoid;
	}
	pre,
	blockquote,
	figure {
		break-inside: avoid;
	}
	.markdown-body {
		font-size: 11pt !important;
		color: #111 !important;
	}
	.markdown-body h1,
	.markdown-body h2,
	.markdown-body h3,
	.markdown-body h4,
	.markdown-body h5,
	.markdown-body h6 {
		color: #000 !important;
	}
	.markdown-body h1 {
		border-bottom-color: #ccc !important;
	}
	.markdown-body h2 {
		border-bottom-color: #ccc !important;
	}
	.markdown-body a {
		color: #1a56db !important;
	}
	.markdown-body code {
		color: #c7254e !important;
		background: #f3f3f3 !important;
	}
	.markdown-body pre {
		background: #f8f8f8 !important;
		border-color: #ddd !important;
		box-shadow: none !important;
	}
	.markdown-body pre code {
		color: #333 !important;
	}
	.markdown-body blockquote {
		border-left-color: #ccc !important;
		color: #555 !important;
		background: #fafafa !important;
	}
	.markdown-body blockquote.hint-callout {
		border-left-color: #b8860b !important;
		background: #fffde7 !important;
	}
	.markdown-body blockquote.hint-callout p:first-child {
		color: #7a6000 !important;
	}
	.markdown-body blockquote small {
		color: #444 !important;
	}
	.markdown-body table th {
		color: #000 !important;
		background: #f0f0f0 !important;
	}
	.markdown-body table th,
	.markdown-body table td {
		border-color: #ccc !important;
	}
	.markdown-body hr {
		border-top-color: #ccc !important;
	}
	.markdown-body img {
		box-shadow: none !important;
	}
	.mermaid-wrap {
		background: #fff !important;
		border-color: #ddd !important;
		box-shadow: none !important;
	}
}
/* ── COLLAPSIBLE SECTIONS ── */
/* Headings become clickable triggers */
.markdown-body h2:hover,
.markdown-body h3:hover,
.markdown-body h4:hover {
	opacity: 0.8;
}
.markdown-body h2:hover .collapse-chevron,
.markdown-body h3:hover .collapse-chevron,
.markdown-body h4:hover .collapse-chevron {
	opacity: 0.75;
}
/* ── LOADING ── */
#view-loading {
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;
	gap: 1rem;
}
#view-loading svg {
	width: 3rem;
	height: 3rem;
	color: rgb(255 255 255 / 50%);
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#view-loading p {
	font-size: 1.25rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}