/* Styles for Markdown-rendered content inside a .md wrapper. Global because the HTML is a MarkupString with no
   component scope. The help skin (purple) is the default; the site skin applies inside the public page template
   wrappers (#header, #content, #footer). */

.md {
	--jlsm-red: #C1272D;
	--jlsm-purple: #99419F;
	--jlsm-purple-deep: #633569;
	--jlsm-yellow: #FFDA03;
	--jlsm-red-deep: #990000;
	--jlsm-ink: #231F20;
	--red-tint: #FBECEC;
	--yellow-tint: #FFF6C7;
	--n50: #FAFAF9;
	--n100: #F5F4F2;
	--n200: #E7E6E6;
	--n300: #D5D3D3;
	--n400: #8F8B8C;
	--n500: #666362;
	--n600: #403C3D;
	--purple-tint: #F3EAF4;
	--purple-line: #E2CBE6;
	--blk-ink: #31506E;
	--blk-tint: #E9EEF4;
	--grf-ink: #0E7C86;
	--grf-deep: #0A5A62;
	--grf-tint: #E3F3F4;
	--shr-ink: #1F6B47;
	--shr-tint: #EAF3EE;
	--valid: #1F8A5B;
	--valid-tint: #E7F4EE;
	--warn-ink: #8A5A13;
	--warn-tint: #FFF6C7;
	--warn-line: #F0DC8A;
	--need-ink: #A32026;
	--need-tint: #FBECEC;
	--need-line: #F1C2C4;
	--font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--text-soft: #4A4547;

	--accent: var(--jlsm-purple);
	--accent-deep: var(--jlsm-purple-deep);
	--accent-tint: var(--purple-tint);
	--accent-line: var(--purple-line);
	--counter-bg: var(--jlsm-purple);
	--counter-fg: #fff;
	--hero-tint: var(--purple-tint);
}

#header .md, #content .md, #footer .md {
	--accent: #231F20;
	--accent-deep: #231F20;
	--accent-tint: #F5F4F2;
	--accent-line: #E7E6E6;
	--counter-bg: #231F20;
	--counter-fg: #FFDA03;
	--hero-tint: #F5F4F2;
}

.md *, .md *::before, .md *::after { box-sizing: border-box; }
.md img { max-width: 100%; height: auto; }

/* document typography: the standalone Markdown rendering and the help drawer are documents (.md.md--doc); a
   Markdown body inside another site rendering carries only .md and inherits its host component's typography */
.md--doc {
	font-family: var(--font);
	color: var(--n600);
	line-height: 1.6;
	max-width: var(--site-measure, 720px);
}

:where(.md--doc) a { color: var(--jlsm-purple); }
.md--doc .h1, .md--doc h1 { font-size:30px;font-weight:800;color:var(--jlsm-ink);line-height:1.15;margin:0 0 8px;letter-spacing:-.01em }
.md--doc .h2, .md--doc h2 { font-size:20px;font-weight:800;color:var(--jlsm-ink);margin:28px 0 8px }
.md--doc .h3, .md--doc h3 { font-size:15.5px;font-weight:700;color:var(--jlsm-ink);margin:20px 0 6px }
.md--doc h4 { font-size: 14.5px; font-weight: 700; color: var(--jlsm-ink); margin: 16px 0 4px; }
.md--doc h5 { font-size: 13.5px; font-weight: 700; color: var(--jlsm-ink); margin: 14px 0 4px; }
.md--doc h6 { font-size: 12.5px; font-weight: 700; color: var(--n600); margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.md--doc blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--n200); color: var(--n600); }
.md--doc blockquote > :last-child { margin-bottom: 0; }
.md--doc hr { border: 0; border-top: 1px solid var(--n200); margin: 20px 0; }
.md del { color: var(--n500); }
.md--doc .lead { font-size:16px;color:var(--n600);line-height:1.55;max-width:70ch;margin:0 0 18px }
.md--doc .p, .md--doc p { font-size: 14.5px; color: var(--n600); margin: 0 0 12px; }
.md--doc ul, .md--doc ol { margin: 0 0 12px; padding-left: 22px; }
.md--doc li { font-size: 14.5px; }
.md--doc ol:not([class]) > li { margin-bottom: 4px; }

/* bulleted lists: the .bul class anywhere, plain lists in a document or in a .md--bullets body */
.md ul.bul, .md--doc ul:not([class]), .md--bullets ul:not([class]) { margin:0 0 12px;padding-left:20px }
.md ul.bul > li, .md--doc ul:not([class]) > li, .md--bullets ul:not([class]) > li { font-size:14.5px;margin-bottom:4px }
.md ul.bul > li, .md--doc ul:not([class]) > li, .md--bullets ul:not([class]) > li { position:relative;padding-left:20px }
.md ul.bul > li::before, .md--doc ul:not([class]) > li::before, .md--bullets ul:not([class]) > li::before { content:"";position:absolute;left:0;top:.55em;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--jlsm-red) }
.md ul.bul, .md--doc ul:not([class]), .md--bullets ul:not([class]) { list-style: none; padding-left: 0; }

/* inline code */
.md code, .md .code { font-family:var(--mono);font-size:12.5px;background:var(--n100);border:1px solid var(--n200);border-radius:4px;padding:1px 5px;color:var(--jlsm-ink) }
.md pre code { background: none; border: 0; border-radius: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre; }

/* inline marks: UI labels, entity and colour chips, status badges */
.md .ui { font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--jlsm-ink);background:#fff;border:1px solid var(--n300);border-bottom-width:2px;border-radius:5px;padding:0 6px }
.md .chip { display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;border-radius:6px;padding:2px 8px;vertical-align:middle }
.md .chip svg { width:14px;height:14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
.md .chip.blk { background:var(--blk-tint);color:var(--blk-ink) }
.md .chip.blk svg { stroke:var(--blk-ink) }
.md .chip.shr { background:var(--shr-tint);color:var(--shr-ink) }
.md .chip.shr svg { stroke:var(--shr-ink) }
.md .chip.grf { background:var(--grf-tint);color:var(--grf-deep) }
.md .chip.grf svg { stroke:var(--grf-ink) }
.md .badge { display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;border-radius:3px;padding:1px 6px;vertical-align:middle }
.md .badge.req { background:var(--warn-tint);color:var(--warn-ink) }
.md .badge.rec { background:var(--blk-tint);color:var(--blk-ink) }
.md .badge.opt { background:var(--n100);color:var(--n500) }
.md .badge.valid { background:var(--valid-tint);color:var(--valid) }
.md .badge.need { background:var(--need-tint);color:var(--need-ink) }
.md .badge.new { background:var(--purple-tint);color:var(--jlsm-purple-deep);border:1px solid var(--purple-line) }
.md .badge.imp { background:var(--grf-tint);color:var(--grf-deep) }
.md .badge.fix { background:var(--n100);color:var(--n600) }
.md .prop { font-family:var(--mono);font-size:12.5px;color:var(--jlsm-ink) }
.md .tick { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;line-height:1;vertical-align:middle }
.md .tick.yes { background:var(--valid);color:#fff }
.md .tick.yes::before { content:"\2713" }
.md .tick.no { background:var(--n200);color:var(--n500) }
.md .tick.no::before { content:"\2715" }
.md .chip.red { background: var(--red-tint); color: var(--need-ink); }
.md .chip.purple { background: var(--purple-tint); color: var(--jlsm-purple-deep); }
.md .chip.teal { background: var(--grf-tint); color: var(--grf-deep); }
.md .chip.green { background: var(--shr-tint); color: var(--shr-ink); }
.md .chip.slate { background: var(--blk-tint); color: var(--blk-ink); }
.md .chip.gold { background: var(--yellow-tint); color: var(--warn-ink); }
.md .chip.ink { background: var(--n200); color: var(--jlsm-ink); }
.md .chip.red svg, .md .chip.purple svg, .md .chip.teal svg, .md .chip.green svg, .md .chip.slate svg, .md .chip.gold svg, .md .chip.ink svg { stroke: currentColor; }
.md .chip, .md .badge { white-space:nowrap }
.md .ui, .md .prop, .md .chip, .md .badge, .md code { white-space:nowrap }

/* numbered steps */
.md ol.steps { list-style:none;padding:0;margin:8px 0 16px;counter-reset:s }
.md ol.steps li { position:relative;padding:0 0 14px 38px;font-size:14.5px;color:var(--n600) }
.md ol.steps li::before { counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--purple-tint);color:var(--jlsm-purple-deep);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center }
.md ol.steps li b { color:var(--jlsm-ink) }
.md ol.steps .sub { font-size:13px;color:var(--n500);margin-top:3px }
.md ol.steps li::before { background:var(--counter-bg);color:var(--counter-fg) }
.md ol.steps.lg li { padding:0 0 22px 52px }
.md ol.steps.lg li::before { width:36px;height:36px;font-size:14px }
.md ol.steps.lg h3 { font-size:17px;font-weight:700;color:var(--jlsm-ink);margin:6px 0 4px }
.md ol.steps.lg p { font-size:15px;color:var(--text-soft);margin:0;line-height:1.6 }
.md ol.steps .meta-tag { font-size:12px;font-weight:700;color:var(--jlsm-red);letter-spacing:.06em;text-transform:uppercase;margin-left:8px }
.md ol.steps.compact li { padding: 0 0 8px 38px; font-size: 13.5px; }

/* callouts, remember band, key takeaways, doc note */
.md .callout { display:flex;gap:12px;border:1px solid;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13.5px;line-height:1.5 }
.md .callout .ci { width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;font-size:13px }
.md .callout .ct { font-weight:800;margin-bottom:2px }
.md .callout.note { background:var(--purple-tint);border-color:var(--purple-line);color:#5B4560 }
.md .callout.note .ci { background:var(--jlsm-purple);color:#fff }
.md .callout.note .ct { color:var(--jlsm-purple-deep) }
.md .callout.tip { background:var(--shr-tint);border-color:#CFE3D6;color:#2F4F3E }
.md .callout.tip .ci { background:var(--shr-ink);color:#fff }
.md .callout.tip .ct { color:var(--shr-ink) }
.md .callout.warn { background:var(--warn-tint);border-color:var(--warn-line);color:#5C4A20 }
.md .callout.warn .ci { background:var(--warn-ink);color:#fff }
.md .callout.warn .ct { color:var(--warn-ink) }
.md .callout.need { background:var(--need-tint);border-color:var(--need-line);color:#6B2A2D }
.md .callout.need .ci { background:var(--jlsm-red);color:#fff }
.md .callout.need .ct { color:var(--need-ink) }
.md .callout.sitecore { background:var(--n100);border-color:var(--n300);color:var(--n600) }
.md .callout.sitecore .ci { background:var(--n600);color:#fff }
.md .callout.sitecore .ct { color:var(--jlsm-ink) }
/* callout text takes the callout's own size and colour and runs the full width of the box */
.md .callout p, .md .callout li { font-size: inherit; color: inherit; max-width: none; }
.md .callout p { margin: 0 0 6px; }
.md .callout > div > :last-child { margin-bottom: 0; }
.md .remember { margin:18px 0;background:var(--jlsm-purple-deep);color:#fff;font-weight:700;font-size:15px;padding:14px 18px;border-radius:9px;text-align:center }
.md .keytake { border:1px solid var(--purple-line);border-radius:10px;padding:14px 18px;margin:16px 0;background:#fff;color:var(--n600) }
.md .keytake .kt-h { font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--jlsm-purple-deep);margin-bottom:8px }
.md .dr-note { font-size:12px;color:var(--n500);background:var(--n50);border:1px dashed var(--n300);border-radius:8px;padding:10px 13px;margin-top:12px }
.md .keytake > :last-child, .md .dr-note > :last-child { margin-bottom: 0; }

/* tick lists and the self-check list */
.md ul.check { list-style:none;padding:0;margin:8px 0 16px }
.md ul.check li { display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:7px }
.md ul.check li .bx { width:20px;height:20px;border:1.5px solid var(--n300);border-radius:50%;flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:transparent }
.md ul.check li.done .bx { background:var(--valid-tint);border-color:var(--valid);color:var(--valid) }
.md ul.check li.done .bx::before { content:'\2713' }
.md ul.selfcheck li { cursor:pointer;border:1px solid var(--n200);border-radius:8px;padding:10px 12px;margin-bottom:8px;align-items:center }
.md ul.selfcheck li:hover { background:var(--n50) }
.md ul.selfcheck li:focus-visible { outline:2px solid var(--jlsm-purple);outline-offset:2px }
.md ul.selfcheck li.done { border-color:#CFE3D6;background:var(--valid-tint) }
.md .selfcheck-result { font-weight:700;color:var(--jlsm-ink) }

/* related-document links */
.md .dr-links { display: grid; grid-template-columns: 1fr; gap: 7px; }
.md .dr-link { display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--n200);border-radius:8px;margin-bottom:7px;font-size:12.5px;font-weight:600;color:var(--jlsm-ink) }
.md .dr-link .arr { margin-left:auto;color:var(--n400) }
.md .dr-link { color:var(--jlsm-ink) }
.md .dr-links .dr-link { margin-bottom: 0; text-decoration: none; }

/* definition list and property table */
.md dl.kv { display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13.5px;margin:8px 0 16px }
.md dl.kv dt { font-weight:700;color:var(--jlsm-ink) }
.md dl.kv dd { margin:0 }
.md table.proptable { width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 16px }
.md .proptable th { text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);padding:0 12px 8px 0;border-bottom:1px solid var(--n200) }
.md .proptable td { padding:9px 12px 9px 0;border-bottom:1px solid var(--n100);vertical-align:top;color:var(--n600) }
.md .table-scroll { overflow-x:auto }

/* code blocks */
.md .codeblock { position:relative;background:#231F20;color:#F5F4F2;border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.55;margin:12px 0 16px }
.md .cb-head { display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px }
.md .cb-copy { margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:3px 9px;letter-spacing:0;text-transform:none }
.md .codeblock .k { color:#FFDA03 }
.md .codeblock .s { color:#B9E3E6 }
.md .codeblock .n { color:#F2A7AB }
.md .codeblock pre { margin:0;white-space:pre;overflow:auto }
.md .codeblock .h { color:#9BB7D6 }
.md .codeblock .c { color:#8F8B8C;font-style:normal }
.md .codeblock pre { overflow-x:auto }
.md .cb-copy { cursor: pointer; }

/* tabs and tab panels */
.md .tabs { display:flex;gap:2px;border-bottom:1px solid var(--n200);margin:12px 0 12px }
.md .tab { font-size:13px;font-weight:700;color:var(--n500);padding:8px 12px;border-bottom:2px solid transparent }
.md .tab.on { color:var(--jlsm-purple-deep);border-bottom-color:var(--jlsm-purple) }
.md .tab.on { color:var(--accent-deep);border-bottom-color:var(--accent) }
.md .tabs .tab { cursor:pointer }
.md .tabpanels > [data-panel] { display:none }
.md .tabpanels > [data-panel].on { display:block }
.md .tabpanels.ink { background: #231F20; color: #F5F4F2; border-radius: 10px; padding: 14px 16px; }
.md .tabpanels.ink .codeblock { background: rgba(255, 255, 255, .06); }
.md .tabpanels.tint { background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 10px; padding: 14px 16px; }
.md .tabpanels.grey { background: var(--n100); border: 1px solid var(--n200); border-radius: 10px; padding: 14px 16px; }

/* accordion: the chevron turns up on the open item, and the answer panel opens and closes by animating
   its single grid row between 0fr and 1fr; the aa-in wrapper clips the answer while the row is short */
.md .acc { border:1px solid var(--n200);border-radius:9px;margin-bottom:8px;overflow:hidden }
.md .aq { display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;font-weight:700;color:var(--jlsm-ink);cursor:pointer }
.md .aq .chev { display:inline-flex;margin-left:8px;color:var(--accent) }
.md .aq .chev svg { width:16px;height:16px }
.md .acc:not(.closed) .aq .chev { transform:rotate(180deg) }
.md .acc .aa { display:grid;grid-template-rows:1fr;padding:0 14px;font-size:13.5px;color:var(--n600) }
.md .acc.closed .aa { grid-template-rows:0fr;visibility:hidden }
.md .acc .aa-in { min-height:0;overflow:hidden }
.md .acc .aa-in::after { content:"";display:block;height:12px }
.md .acc .aa-in > :last-child { margin-bottom: 0; }
.md .acc .aa p { font-size:inherit;color:inherit;max-width:none }

@media (prefers-reduced-motion: no-preference) {
	.md .aq .chev { transition:transform 200ms cubic-bezier(.22,.61,.36,1) }
	.md .acc .aa { transition:grid-template-rows 200ms cubic-bezier(.22,.61,.36,1), visibility 200ms }
}

/* figures and video */
.md .fig { border:1px solid var(--n200);border-radius:10px;background:#fff;margin:12px 0 4px;box-shadow:0 6px 16px rgba(35,31,32,.08) }
.md .fig img { display:block;width:100%;height:auto;border-radius:9px }
.md .figcap { font-size:12px;color:var(--n500);margin:0 0 16px }
.md .figcap b { color:var(--n600) }
.md .fig { position:relative }
.md .fig.expand { cursor:zoom-in }
.md .fig .lb-hint { position:absolute;right:10px;bottom:10px;font-size:11px;font-weight:700;color:#fff;background:rgba(35,31,32,.75);border-radius:6px;padding:4px 9px;font-family:var(--font);pointer-events:none }
.md figure.media { margin:0 }
.md figure.media figcaption, .md figure.media .figcap { font-size:12.5px;color:var(--n500);margin-top:8px }
.md figure.media .fig { margin:0 }
.md .video-frame { position:relative;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--n200);background:linear-gradient(135deg,var(--purple-tint),#fff 55%,var(--grf-tint));display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px -24px rgba(35,31,32,.35) }
.md .video-frame { overflow: hidden; }
.md .video-frame video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* buttons */
.md .btn { display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;border-radius:7px;padding:9px 14px;border:1px solid var(--jlsm-purple);color:var(--jlsm-purple-deep);background:#fff }
.md .btn.solid { background:var(--jlsm-purple);color:#fff }
.md .btn.red { background:var(--jlsm-red);border-color:var(--jlsm-red);color:#fff }
.md .btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round }
.md .btn { text-decoration:none;cursor:pointer;font-family:inherit;justify-content:center;white-space:nowrap }
.md .btn:hover { text-decoration:none }
.md .btn.solid:hover { background:var(--jlsm-purple-deep);border-color:var(--jlsm-purple-deep);color:#fff }
.md .btn.red:hover { background:#A81F25;border-color:#A81F25;color:#fff }
.md .btn:not(.solid):not(.red):not(.inverse):hover { background:var(--purple-tint) }
.md .btn.lg { height:44px;padding:0 22px;font-size:14.5px;border-radius:6px }
.md .btn.sm { padding: 6px 10px; font-size: 12px; }
.md .btn.full { width:100% }
.md .btn.inverse { background:#fff;border-color:#fff;color:var(--jlsm-red) }
.md .btn.inverse:hover { background:var(--red-tint) }
.md .btn.inverse.outline { background:transparent;border-color:rgba(255,255,255,.7);color:#fff }
.md .btn.inverse.outline:hover { background:rgba(255,255,255,.12) }

/* the wrapper's first and last blocks sit flush with its edges; after the component rules so it wins ties */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }

/* lightbox: one overlay appended to the body, outside any .md wrapper */
.md-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(35, 31, 32, .92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.md-lightbox.is-open {
	display: flex;
}

.md-lightbox__box {
	max-width: min(1500px, 96vw);
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.md-lightbox__box img {
	max-width: 100%;
	max-height: calc(94vh - 70px);
	width: auto;
	height: auto;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}

.md-lightbox__cap {
	margin: 0 auto;
	max-width: 90ch;
	color: rgba(255, 255, 255, .88);
	font-size: 14.5px;
	line-height: 1.5;
	text-align: center;
}

.md-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #231F20;
	background: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
}

/* On phones the lightbox scrolls and pinch-zooms rather than shrinking the screenshot to fit */
@media (max-width: 860px) {
	.md-lightbox {
		align-items: flex-start;
		justify-content: flex-start;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y pinch-zoom;
		padding: 56px 0 24px;
	}

	.md-lightbox__box {
		max-width: none;
		max-height: none;
		width: auto;
		gap: 8px;
	}

	.md-lightbox__box img {
		max-width: none;
		max-height: none;
		width: 900px;
		border-radius: 0;
	}

	.md-lightbox__cap {
		padding: 0 16px;
		text-align: left;
	}

	.md-lightbox__close {
		position: fixed;
		top: 10px;
		right: 10px;
	}
}

.md-lightbox__count {
	position: absolute;
	top: 22px;
	left: 26px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 8px;
	padding: 7px 12px;
}

.md-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	font-family: inherit;
}

.md-lightbox__nav:hover {
	background: rgba(255, 255, 255, .26);
}

.md-lightbox__nav--prev {
	left: 22px;
}

.md-lightbox__nav--next {
	right: 22px;
}

/* editing: the source textarea and its live preview */
.md--editing {
	white-space: pre-wrap;
	font-family: var(--mono);
	font-size: 13px;
}

.md-preview {
	margin-top: 12px;
	border-top: 1px dashed var(--n300);
	padding-top: 12px;
}

.md-preview__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--n400);
	margin-bottom: 8px;
}

.md--hint {
	padding: 12px 14px;
	border: 1px dashed var(--n300);
	border-radius: 6px;
	background: var(--n50);
	font-family: var(--font);
	font-size: 13px;
	color: var(--n500);
}