-color is invalid and every rule falls back to the theme's token. */
:root {
--md-heading-color:var(--md-heading-color-light); --md-paragraph-color:var(--md-paragraph-color-light);
--md-strong-color:var(--md-strong-color-light); --md-emphasis-color:var(--md-emphasis-color-light);
--md-link-color:var(--md-link-color-light); --md-inline-code-color:var(--md-inline-code-color-light);
--md-code-block-color:var(--md-code-block-color-light); --md-blockquote-color:var(--md-blockquote-color-light);
--md-list-color:var(--md-list-color-light); --md-task-list-color:var(--md-task-list-color-light);
--md-table-color:var(--md-table-color-light); --md-divider-color:var(--md-divider-color-light);
--md-image-color:var(--md-image-color-light); --md-footnote-color:var(--md-footnote-color-light);
--md-highlight-color:var(--md-highlight-color-light); --md-superscript-color:var(--md-superscript-color-light);
--md-subscript-color:var(--md-subscript-color-light); --md-html-color:var(--md-html-color-light);
}
:root[data-theme="dark"] {
--md-heading-color:var(--md-heading-color-dark); --md-paragraph-color:var(--md-paragraph-color-dark);
--md-strong-color:var(--md-strong-color-dark); --md-emphasis-color:var(--md-emphasis-color-dark);
--md-link-color:var(--md-link-color-dark); --md-inline-code-color:var(--md-inline-code-color-dark);
--md-code-block-color:var(--md-code-block-color-dark); --md-blockquote-color:var(--md-blockquote-color-dark);
--md-list-color:var(--md-list-color-dark); --md-task-list-color:var(--md-task-list-color-dark);
--md-table-color:var(--md-table-color-dark); --md-divider-color:var(--md-divider-color-dark);
--md-image-color:var(--md-image-color-dark); --md-footnote-color:var(--md-footnote-color-dark);
--md-highlight-color:var(--md-highlight-color-dark); --md-superscript-color:var(--md-superscript-color-dark);
--md-subscript-color:var(--md-subscript-color-dark); --md-html-color:var(--md-html-color-dark);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--md-heading-color:var(--md-heading-color-dark); --md-paragraph-color:var(--md-paragraph-color-dark);
--md-strong-color:var(--md-strong-color-dark); --md-emphasis-color:var(--md-emphasis-color-dark);
--md-link-color:var(--md-link-color-dark); --md-inline-code-color:var(--md-inline-code-color-dark);
--md-code-block-color:var(--md-code-block-color-dark); --md-blockquote-color:var(--md-blockquote-color-dark);
--md-list-color:var(--md-list-color-dark); --md-task-list-color:var(--md-task-list-color-dark);
--md-table-color:var(--md-table-color-dark); --md-divider-color:var(--md-divider-color-dark);
--md-image-color:var(--md-image-color-dark); --md-footnote-color:var(--md-footnote-color-dark);
--md-highlight-color:var(--md-highlight-color-dark); --md-superscript-color:var(--md-superscript-color-dark);
--md-subscript-color:var(--md-subscript-color-dark); --md-html-color:var(--md-html-color-dark);
}
}
/* Inside the app the page is transparent, so the window colour shows through exactly as it does behind
the source editor (whose views draw no background) and Split shows one canvas. PDF export loads the
page without this class and keeps an opaque white page. */
:root.md-app { --bg:transparent; }
* { box-sizing:border-box; margin:0; padding:0; }
/* Read-only preview: the document root scrolls, so Page Down, Space, arrows, Home and End work without
first clicking into the page. */
html { height:100%; background:var(--bg); overflow-x:hidden; overflow-y:auto; }
body {
min-height:100%; background:var(--bg); color:var(--text);
font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", sans-serif;
-webkit-font-smoothing:antialiased;
}
/* Edit+: BODY is the one page scroller; the caret-follow and scroll-past-end logic measure and scroll it
(T22). render.js carries the scroll position across the switch. */
:root.md-edit-mode { overflow:hidden; }
:root.md-edit-mode body { height:100%; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* The side padding shrinks from 44 px to 16 px below an 880 px wide page, so a narrow pane keeps its width
for text: Split, an iPhone, and a page enlarged by zoom or Dynamic Type (page zoom narrows the layout
width, so a fixed 44 px grew with the text and left an iPhone at the largest sizes a few words a line). */
.preview {
max-width:860px; margin:0 auto; padding:34px clamp(16px, 5vw, 44px) 90px;
line-height:1.78; font-size:15px; word-break:keep-all;
}
.preview > .md-block:first-child > :first-child { margin-top:0; }
.preview.is-editable {
min-height:100%;
/* Scroll-past-end: at maximum scroll the final line rests below the normal 34px top padding, while at
least that line remains visible. `100vh` is the fallback for older WebKit; `100dvh` follows the
visible viewport when the iOS keyboard changes it. */
padding-bottom:max(0px, calc(100vh - 34px - 1.78em));
padding-bottom:max(0px, calc(100dvh - 34px - 1.78em));
caret-color:var(--accent);
outline:none;
}
/* Edit+ chrome is layout-neutral: blocks keep margin:0 and padding:0 (so their children's margins
collapse exactly as in Preview) and hover/editing are painted with box-shadow, which never moves
anything. Preview and Edit+ therefore share one geometry. */
.preview .md-block { border-radius:6px; }
.preview.is-editable .md-block { cursor:text; }
.preview.is-editable .md-block:hover { background:var(--edit-tint); box-shadow:0 0 0 7px var(--edit-tint); }
.preview.is-editable .md-block.is-editing { background:var(--edit-tint); box-shadow:0 0 0 7px var(--edit-tint), 0 0 0 8px var(--edit-ring); }
.preview.is-editable .md-block:focus { outline:none; }
.preview.is-editable .md-block:focus-visible { box-shadow:0 0 0 7px var(--edit-tint), 0 0 0 9px var(--edit-ring); }
/* The block's own font, colour and line height arrive inline from render.js (CSSOM, allowed by the CSP);
only code, tables and raw HTML are edited in a monospaced face. */
.preview .md-block-editor {
display:block; width:100%; margin:0; padding:0; border:0; outline:none; resize:none; overflow:hidden;
background:transparent; color:var(--text); font:inherit; caret-color:var(--accent);
tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere;
}
.preview .md-block-editor.is-mono { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13px; line-height:1.6; }
.preview h1, .preview h2, .preview h3, .preview h4, .preview h5, .preview h6 { color:var(--md-heading-color,var(--text)); letter-spacing:-.01em; }
.preview h1 { font-size:28px; font-weight:800; line-height:1.25; letter-spacing:-.015em; margin:36px 0 16px; }
.preview h2 { font-size:21px; font-weight:700; margin:32px 0 12px; }
.preview h3 { font-size:17px; font-weight:700; margin:24px 0 9px; }
.preview h4 { font-size:15px; font-weight:700; margin:22px 0 8px; }
.preview h5 { font-size:13.5px; font-weight:700; margin:20px 0 8px; }
.preview h6 { font-size:12.5px; font-weight:700; margin:18px 0 8px; color:var(--md-html-color,var(--dim-text)); }
.preview p { color:var(--md-paragraph-color,var(--muted)); margin:13px 0; }
.preview strong { color:var(--md-strong-color,var(--text)); font-weight:700; }
.preview em { color:var(--md-emphasis-color,var(--muted)); font-style:italic; }
.preview del { color:var(--md-emphasis-color,var(--dim-text)); }
.preview a { color:var(--md-link-color,var(--accent-text)); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--md-link-color,var(--accent-text)) 32%, transparent); }
.preview a:hover { border-bottom-color:currentColor; }
.preview ul, .preview ol { margin:13px 0; padding-left:22px; color:var(--md-list-color,var(--muted)); }
.preview li { margin:5px 0; }
.preview li::marker { color:var(--md-list-color,var(--accent3)); }
.preview li.task-list-item { list-style-type:none; }
.preview li.task-list-item > input:first-child, .preview li.task-list-item > p:first-child > input:first-child { margin:0 .4em 0 -1.35em; vertical-align:-1px; }
.preview hr { border:0; border-top:1px solid var(--md-divider-color,var(--border)); margin:26px 0; }
.preview code {
background:var(--code-bg);
color:var(--md-inline-code-color,var(--code-text));
padding:1px 6px; border-radius:5px;
font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12.5px;
}
/* Long unbreakable tokens (inline code, bare URLs, long identifiers) wrap INSIDE their box instead of
being cut off at the right edge. `overflow-wrap:anywhere` coexists with `word-break:keep-all`: Korean
prose still never breaks mid-word; a token breaks only when it would otherwise overflow its line. */
.preview p, .preview li, .preview blockquote, .preview dd { overflow-wrap:anywhere; }
.preview :not(pre) > code { overflow-wrap:anywhere; word-break:break-word; }
.preview pre {
background:var(--pre-bg);
border:1px solid var(--border);
border-radius:10px;
padding:14px 16px; overflow-x:auto; margin:16px 0; max-width:100%;
}
.preview pre code { background:none; color:var(--md-code-block-color,var(--pre-text)); padding:0; font-size:12.5px; line-height:1.8; white-space:pre; }
/* "코드 블록 줄바꿈" on: wrap inside the box instead of scrolling it. */
:root.wrap-code .preview pre { overflow-x:hidden; }
:root.wrap-code .preview pre code { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
/* Tables keep their natural column widths: cells break long words only when they must (`break-word`
does not shrink a column's minimum width the way `anywhere` did, which stacked short columns into one
glyph per line), and a table wider than the page scrolls inside its own wrapper. */
.preview .md-table-wrap { overflow-x:auto; max-width:100%; margin:16px 0; }
.preview .md-table-wrap > table { margin:0; }
.preview table { border-collapse:collapse; width:100%; margin:16px 0; font-size:13.5px; color:var(--md-table-color,var(--muted)); }
.preview td, .preview th { overflow-wrap:break-word; }
.preview th { padding:8px 12px; font-size:13px; font-weight:650; letter-spacing:0; text-transform:none; color:var(--md-table-color,var(--text)); border-bottom:1px solid var(--border); vertical-align:bottom; }
.preview th:not([align]) { text-align:left; }
.preview td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--md-table-color,var(--muted)); line-height:1.6; }
.preview blockquote { background:var(--quote-bg); border:1px solid var(--quote-border); border-radius:10px; padding:12px 16px; margin:18px 0; color:var(--md-blockquote-color,var(--quote-text)); font-size:14px; }
.preview blockquote p { margin:0; color:inherit; }
.preview blockquote p + p { margin-top:8px; }
.preview img { max-width:100%; border-radius:8px; margin:10px 0; border-color:var(--md-image-color,var(--border)); }
/* An image the page cannot show (missing, unreadable, its folder not allowed yet): its description in a
small box instead of a blank. render.js adds the box and hides the image. */
.preview img.md-img-missing { display:none; }
.preview .md-img-alt { display:inline-block; max-width:100%; margin:4px 0; padding:2px 9px; border:1px dashed var(--border); border-radius:6px; color:var(--dim-text); font-size:13px; line-height:1.6; vertical-align:middle; overflow-wrap:anywhere; }
.preview .md-img-alt::before { content:"🖼️"; margin-right:6px; }
.preview .md-image-figure { margin:12px 0; }
.preview .md-image-figure figcaption { color:var(--md-image-color,var(--dim-text)); font-size:12.5px; margin-top:4px; }
.preview .md-text-box { border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin:14px 0; background:color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.preview .md-size-small { font-size:.88em; }
.preview .md-size-large { font-size:1.2em; }
.preview input[type="checkbox"] { accent-color:var(--md-task-list-color,var(--accent3)); }
.preview.is-editable .md-task-toggle { cursor:pointer; }
.preview .md-task-toggle:disabled { cursor:default; }
.preview mark { background:color-mix(in srgb, var(--md-highlight-color,#ffd33d) 32%, transparent); color:var(--md-highlight-color,var(--mark-text)); border-radius:4px; padding:0 3px; }
.preview sup:not(.footnote-ref), .preview sub { color:var(--md-superscript-color,var(--accent-text)); font-weight:600; }
.preview sub { color:var(--md-subscript-color,var(--accent-text)); }
.preview .footnotes { color:var(--md-footnote-color,var(--dim-text)); font-size:13px; margin-top:34px; }
.preview .footnotes ol { color:inherit; padding-left:20px; }
.preview .footnotes li { padding-left:2px; }
.preview .footnotes li p { color:inherit; margin:4px 0; }
.preview .footnote-ref a, .preview .footnote-backref { color:var(--md-footnote-color,var(--accent-text)); text-decoration:none; border-bottom:0; }
.preview dl { color:var(--md-paragraph-color,var(--muted)); margin:14px 0; }
.preview dt { color:var(--md-strong-color,var(--text)); font-weight:650; margin-top:10px; }
.preview dd { margin:4px 0 8px 18px; }
/* Callouts keep their tinted box; the text inside uses the normal text colour for contrast. */
.preview blockquote.cal-info { background:rgba(88,166,255,.10); border-color:rgba(88,166,255,.32); color:var(--text); }
.preview blockquote.cal-tip { background:rgba(63,185,80,.10); border-color:rgba(63,185,80,.32); color:var(--text); }
.preview blockquote.cal-warn { background:rgba(255,166,87,.13); border-color:rgba(255,166,87,.40); color:var(--text); }
.preview blockquote.cal-important { background:rgba(163,113,247,.10); border-color:rgba(163,113,247,.34); color:var(--text); }
.preview blockquote.cal-caution { background:rgba(248,81,73,.10); border-color:rgba(248,81,73,.34); color:var(--text); }
.preview .md-alert-title { font-weight:650; margin:0 0 4px; }
.preview blockquote.cal-info > .md-alert-title { color:var(--alert-info); }
.preview blockquote.cal-tip > .md-alert-title { color:var(--alert-tip); }
.preview blockquote.cal-important > .md-alert-title { color:var(--alert-important); }
.preview blockquote.cal-warn > .md-alert-title { color:var(--alert-warn); }
.preview blockquote.cal-caution > .md-alert-title { color:var(--alert-caution); }
:root.md-app { --page:#fdfdfc; --backdrop:#eeedea; --sheet-line:rgba(0,0,0,.09); --sheet-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05); --pick:#d4f2df; --pick-text:#0f7f41; --pill-bg:#ffffff; --pill-text:#3a4250; --pill-line:rgba(0,0,0,.08); --pill-hover:rgba(0,0,0,.06); }
:root.md-app[data-theme="dark"] { --page:#17191c; --backdrop:#0f1113; --sheet-line:rgba(255,255,255,.08); --sheet-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --pick:rgba(70,211,132,.22); --pick-text:#5fd998; --pill-bg:#22262b; --pill-text:#d5dbe2; --pill-line:rgba(255,255,255,.1); --pill-hover:rgba(255,255,255,.08); }
/* Draft C, one sheet of paper: in the app, the page reads and writes in larger type on one white sheet standing on warm
gray; the measures are the draft's at the window's default size. Below 700 px (Split's panes, a phone) there is no
room for margins, and the sheet fills the view. The PDF loads the page without .md-app and keeps its own type. */
:root.md-app, :root.md-app body { background:var(--page); }
:root.md-app .preview { font-size:17.5px; line-height:1.7; color:var(--text); padding-top:42px; }
:root.md-app .preview p { color:var(--md-paragraph-color,var(--text)); margin:26px 0; }
:root.md-app .preview ul, :root.md-app .preview ol { color:var(--md-list-color,var(--text)); margin:36px 0 26px; padding-left:23px; }
:root.md-app .preview li { margin:4.5px 0; }
:root.md-app .preview li > p { margin:8px 0; }
:root.md-app .preview li > p:first-child { margin-top:0; }
:root.md-app .preview li > ul, :root.md-app .preview li > ol { margin:4.5px 0; }
:root.md-app .preview ol > li::marker { color:var(--md-list-color,var(--accent)); }
/* The draft's dot is larger than the text's own bullet, and a larger marker would make its line taller. */
:root.md-app .preview ul > li:not(.task-list-item) { position:relative; list-style-type:none; }
:root.md-app .preview ul > li:not(.task-list-item)::before {
content:""; position:absolute; left:-22px; top:calc(.85em - 4px); width:8px; height:8px; border-radius:50%;
background:var(--md-list-color,var(--accent));
}
:root.md-app .preview ul ul > li:not(.task-list-item)::before { background:none; border:1.5px solid var(--md-list-color,var(--accent)); }
:root.md-app .preview ul ul ul > li:not(.task-list-item)::before { background:var(--md-list-color,var(--accent)); border:0; top:calc(.85em - 3px); left:-21px; width:6px; height:6px; border-radius:1.5px; }
/* Under a heading only the heading's own margin counts. */
:root.md-app .preview .md-block[data-md-type="heading"] + .md-block > :first-child { margin-top:0; }
:root.md-app .preview em { color:var(--md-emphasis-color,var(--text)); }
:root.md-app .preview h1 { font-size:44px; font-weight:800; line-height:1.2; letter-spacing:-.02em; margin:44px 0 21px; }
:root.md-app .preview h2 { font-size:27px; font-weight:800; line-height:1.3; margin:31px 0 14.5px; }
:root.md-app .preview h3 { font-size:21px; margin:28px 0 12px; }
:root.md-app .preview h4 { font-size:18px; margin:24px 0 8px; }
:root.md-app .preview h5 { font-size:15.5px; }
:root.md-app .preview h6 { font-size:14.5px; }
:root.md-app .preview hr { margin:32px 0; }
:root.md-app .preview code { font-size:15px; }
:root.md-app .preview pre code { font-size:14px; }
:root.md-app .preview pre { margin:26px 0; }
:root.md-app .preview blockquote { font-size:16.5px; margin:26px 0; }
:root.md-app .preview .md-table-wrap { margin:26px 0; }
:root.md-app .preview table { font-size:15.5px; color:var(--md-table-color,var(--text)); }
:root.md-app .preview th { padding:7px 9px; font-size:14px; font-weight:400; color:var(--md-table-color,var(--dim-text)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
:root.md-app .preview td { padding:8px 9px; color:var(--md-table-color,var(--text)); }
/* A phone (draft C on iPhone): the page fills the screen and the title fits its width. */
@media (max-width:519px) {
:root.md-app .preview h1 { font-size:36px; margin:32px 0 18px; }
:root.md-app .preview h2 { font-size:24px; margin:28px 0 12px; }
:root.md-app .preview h3 { font-size:20px; margin:24px 0 10px; }
}
@media (min-width:700px) {
:root.md-app, :root.md-app body { background:var(--backdrop); }
:root.md-app .preview {
--sheet:min(760px, max(65.6vw, 600px));
width:var(--sheet); max-width:calc(100% - 48px); margin:18px auto 0; min-height:calc(100vh - 18px);
background:var(--page); border:1px solid var(--sheet-line); border-bottom:0; border-radius:4px 4px 0 0;
box-shadow:var(--sheet-shadow); padding:42px calc(var(--sheet) * .066) 96px;
}
/* The last line can come up from the window's edge while it is written. */
:root.md-app .preview.is-writing { padding-bottom:40vh; }
}
/* The writing view (writing.js). Pre-wrap: WebKit types real spaces into it, and a space at the end of a line shows. No
tint, no ring: nothing marks the block under the caret. Raw HTML has no place for a caret and opens as its source. */
.preview.is-writing { white-space:pre-wrap; caret-color:var(--accent); outline:none; }
.preview.is-writing .md-block[data-md-type="html"], .preview.is-writing .md-opaque { white-space:normal; }
.preview.is-editable.is-writing .md-block:hover, .preview.is-editable.is-writing .md-block:focus-visible { background:none; box-shadow:none; }
.preview.is-editable.is-writing .md-block.is-editing { background:none; box-shadow:0 0 0 1px var(--border); }
.preview.is-writing .md-ghost { margin:26px 0; min-height:1.7em; }
.preview.is-writing ::selection { background:var(--pick); color:var(--pick-text); }
.preview.is-writing .md-task-toggle { -webkit-user-modify:read-only; }
/* The format pill: only over a selection. */
body > .md-pill {
position:fixed; left:0; top:0; z-index:30; padding:3px 6px; border:1px solid var(--pill-line); border-radius:12px;
background:var(--pill-bg); color:var(--pill-text); box-shadow:0 6px 18px rgba(0,0,0,.13); font-size:13px; line-height:1;
-webkit-user-select:none; user-select:none;
}
body > .md-pill[hidden], .md-pill-row[hidden], .md-pill-field[hidden], .md-pill-menu[hidden], .md-pill-button[hidden] { display:none; }
.md-pill-row, .md-pill-field { display:flex; align-items:center; gap:2px; }
.md-pill-button { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 4px; border:0; border-radius:7px; background:none; color:inherit; font:inherit; cursor:default; }
.md-pill-button:hover { background:var(--pill-hover); }
.md-pill-button.is-on { color:var(--accent-text); }
.md-pill-bold { font-weight:700; font-size:14px; }
.md-pill-italic { font-style:italic; font-family:Georgia, "Times New Roman", serif; font-size:15px; }
.md-pill-strike { text-decoration:line-through; font-size:14px; }
.md-pill-separator { width:1px; height:18px; margin:0 4px; background:var(--pill-line); }
.md-pill-heading { border:1px solid var(--pill-line); border-radius:14px; }
.md-pill-heading-inner { display:inline-flex; align-items:center; gap:4px; padding:0 4px; }
.md-pill-menu { position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); display:flex; flex-direction:column; min-width:120px; padding:4px; border:1px solid var(--pill-line); border-radius:10px; background:var(--pill-bg); box-shadow:0 6px 18px rgba(0,0,0,.13); }
.md-pill-menu .md-pill-button { justify-content:flex-start; padding:0 10px; white-space:nowrap; }
.md-pill-field input { width:240px; height:28px; padding:0 8px; border:0; outline:none; background:none; color:inherit; font:inherit; -webkit-user-select:text; user-select:text; }
:root[data-heading-format="underlined"] .preview h1,
:root[data-heading-format="underlined"] .preview h2,
:root[data-heading-format="underlined"] .preview h3 { border-bottom:2px solid var(--md-heading-color,var(--border)); }
:root[data-heading-format="leftRule"] .preview h1,
:root[data-heading-format="leftRule"] .preview h2,
:root[data-heading-format="leftRule"] .preview h3 { border-left:4px solid var(--md-heading-color,var(--accent)); padding-left:12px; border-bottom:0; }
:root[data-heading-format="boxed"] .preview h1,
:root[data-heading-format="boxed"] .preview h2,
:root[data-heading-format="boxed"] .preview h3 { background:color-mix(in srgb, var(--md-heading-color,var(--accent)) 10%, var(--bg)); border:1px solid color-mix(in srgb, var(--md-heading-color,var(--border)) 35%, var(--border)); border-radius:8px; padding:10px 12px; }
:root[data-paragraph-format="compact"] .preview p { margin:6px 0; line-height:1.55; }
:root[data-paragraph-format="spacious"] .preview p { margin:18px 0; line-height:1.95; }
:root[data-strong-format="accent"] .preview strong { background:color-mix(in srgb, var(--md-strong-color,var(--accent)) 10%, transparent); padding:0 3px; border-radius:4px; }
:root[data-strong-format="underlined"] .preview strong { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
:root[data-emphasis-format="accent"] .preview em { color:var(--md-emphasis-color,var(--accent-text)); font-style:normal; font-weight:600; }
:root[data-emphasis-format="highlighted"] .preview em { background:color-mix(in srgb, var(--md-emphasis-color,var(--accent3)) 16%, transparent); border-radius:4px; padding:0 3px; }
:root[data-link-format="underlined"] .preview a { text-decoration:underline; text-underline-offset:3px; }
:root[data-link-format="button"] .preview a:not(.footnote-backref) { display:inline-block; border:1px solid currentColor; border-radius:6px; padding:1px 7px; margin:1px 0; }
:root[data-inline-code-format="plain"] .preview :not(pre) > code { background:none; padding:0; }
:root[data-inline-code-format="outlined"] .preview :not(pre) > code { background:none; border:1px solid currentColor; }
:root[data-code-block-format="minimal"] .preview pre { background:transparent; border-left:3px solid var(--md-code-block-color,var(--accent)); border-top:0; border-right:0; border-bottom:0; border-radius:0; }
:root[data-code-block-format="terminal"] .preview pre { border-radius:8px; box-shadow:inset 0 22px 0 color-mix(in srgb, var(--md-code-block-color,var(--accent)) 13%, var(--pre-bg)); padding-top:36px; }
:root[data-blockquote-format="boxed"] .preview blockquote { border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.04); }
:root[data-blockquote-format="quoteMark"] .preview blockquote::before { content:"“"; display:block; font-size:30px; line-height:1; color:var(--md-blockquote-color,var(--accent)); }
:root[data-list-format="compact"] .preview li { margin:1px 0; }
:root[data-list-format="accentMarker"] .preview li::marker { color:var(--md-list-color,var(--accent3)); font-weight:700; }
:root[data-task-list-format="clean"] .preview input[type="checkbox"] { filter:grayscale(1); }
/* Every task item, tight or loose (a loose item's checkbox sits inside its ), plus raw-HTML items that
start with a checkbox. Inside its capsule a loose item's paragraph keeps no outer margin, and the checkbox
no longer hangs into the list's indent, where the capsule's edge cut it in half. */
:root[data-task-list-format="pill"] .preview li.task-list-item,
:root[data-task-list-format="pill"] .preview li:has(> input[type="checkbox"]) { display:block; width:fit-content; background:color-mix(in srgb, var(--md-task-list-color,var(--accent3)) 10%, transparent); border-radius:999px; padding:2px 10px; }
:root[data-task-list-format="pill"] .preview li.task-list-item > p:first-child { margin-top:0; }
:root[data-task-list-format="pill"] .preview li.task-list-item > p:last-child { margin-bottom:0; }
:root[data-task-list-format="pill"] .preview li.task-list-item > input:first-child,
:root[data-task-list-format="pill"] .preview li.task-list-item > p:first-child > input:first-child { margin-left:0; }
:root[data-table-format="striped"] .preview tbody tr:nth-child(odd) { background:color-mix(in srgb, var(--md-table-color,var(--accent3)) 7%, transparent); }
:root[data-table-format="minimal"] .preview th, :root[data-table-format="minimal"] .preview td { border-bottom:0; padding-left:0; }
:root[data-divider-format="dotted"] .preview hr { border-top-style:dotted; }
:root[data-divider-format="thick"] .preview hr { border-top-width:3px; }
:root[data-image-format="framed"] .preview img { border:1px solid var(--md-image-color,var(--border)); padding:4px; background:var(--bg); }
:root[data-image-format="fullWidth"] .preview img { width:100%; }
:root[data-footnote-format="boxed"] .preview .footnotes { border:1px solid var(--md-footnote-color,var(--border)); border-radius:8px; padding:12px 16px; }
:root[data-footnote-format="compact"] .preview .footnotes { font-size:11.5px; }
:root[data-highlight-format="underlined"] .preview mark { background:transparent; border-bottom:3px solid var(--md-highlight-color,#ffd33d); border-radius:0; }
:root[data-highlight-format="outlined"] .preview mark { background:transparent; border:1px solid var(--md-highlight-color,#ffd33d); }
:root[data-superscript-format="accent"] .preview sup:not(.footnote-ref), :root[data-subscript-format="accent"] .preview sub { background:color-mix(in srgb, currentColor 12%, transparent); border-radius:4px; padding:0 3px; }
:root[data-superscript-format="badge"] .preview sup:not(.footnote-ref), :root[data-subscript-format="badge"] .preview sub { border:1px solid currentColor; border-radius:999px; padding:0 4px; font-size:.72em; }
:root[data-html-format="muted"] .preview details,
:root[data-html-format="muted"] .preview summary,
:root[data-html-format="muted"] .preview kbd { color:var(--md-html-color,var(--dim-text)); }
:root[data-html-format="boxed"] .preview details { border:1px solid var(--md-html-color,var(--border)); border-radius:8px; padding:10px 12px; }
/* The notice offering to allow a folder of images (macOS). It floats above the page, so nothing in the
document moves when it appears or goes; one line high, it fits the page's top padding (the whole
message is its tooltip when it has to be cut), and it goes lower while the window's own find bar or
notice would cover it (render.js sets --md-image-notice-top). Only the page's own notice, a child of
: a document's HTML (inside #content) borrowing the class cannot float a look-alike over the page. */
body > .md-image-notice {
position:fixed; top:var(--md-image-notice-top, 5px); left:50%; transform:translateX(-50%); z-index:20;
display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px); padding:3px 4px 3px 12px;
border:1px solid var(--border); border-radius:9px; background:var(--notice-bg); color:var(--text);
box-shadow:0 3px 12px rgba(0,0,0,.14); font-size:12.5px; line-height:1.4; white-space:nowrap;
}
body > .md-image-notice[hidden] { display:none; }
body > .md-image-notice > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body > .md-image-notice button { font:inherit; border:0; border-radius:6px; cursor:pointer; }
body > .md-image-notice .md-image-notice-allow { flex:none; padding:2px 10px; background:var(--notice-button-bg); color:var(--notice-button-text); font-weight:600; }
body > .md-image-notice .md-image-notice-close { flex:none; padding:0 6px; background:transparent; color:var(--dim-text); font-size:16px; line-height:1; }
/* Printing (PDF export): the page flows onto paper, nothing scrolls or clips, and blocks avoid page
breaks where the paper size allows. */
@media print {
body > .md-image-notice, body > .md-pill { display:none; }
html, :root.md-edit-mode { height:auto; overflow:visible; }
body, :root.md-edit-mode body { height:auto; min-height:0; overflow:visible; }
.preview, .preview.is-editable { max-width:none; padding:0; }
.preview pre, .preview blockquote, .preview img, .preview tr { break-inside:avoid; }
.preview h1, .preview h2, .preview h3, .preview h4, .preview h5, .preview h6 { break-after:avoid; }
.preview pre { overflow:visible; }
.preview pre code { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.preview .md-table-wrap { overflow:visible; }
}