npm - orz-markdown - Versions diffs - 1.0.0 - Mend

orz-markdown 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/LICENSE +21 -0
package/README.md +132 -0
package/dist/index.d.ts +18 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +159 -0
package/dist/index.js.map +1 -0
package/dist/plugins/attrs.d.ts +3 -0
package/dist/plugins/attrs.d.ts.map +1 -0
package/dist/plugins/attrs.js +60 -0
package/dist/plugins/attrs.js.map +1 -0
package/dist/plugins/emoji.d.ts +2 -0
package/dist/plugins/emoji.d.ts.map +1 -0
package/dist/plugins/emoji.js +51 -0
package/dist/plugins/emoji.js.map +1 -0
package/dist/plugins/markdown-include.d.ts +3 -0
package/dist/plugins/markdown-include.d.ts.map +1 -0
package/dist/plugins/markdown-include.js +44 -0
package/dist/plugins/markdown-include.js.map +1 -0
package/dist/plugins/mermaid.d.ts +2 -0
package/dist/plugins/mermaid.d.ts.map +1 -0
package/dist/plugins/mermaid.js +18 -0
package/dist/plugins/mermaid.js.map +1 -0
package/dist/plugins/nyml.d.ts +2 -0
package/dist/plugins/nyml.d.ts.map +1 -0
package/dist/plugins/nyml.js +21 -0
package/dist/plugins/nyml.js.map +1 -0
package/dist/plugins/nyml_parser.d.ts +32 -0
package/dist/plugins/nyml_parser.d.ts.map +1 -0
package/dist/plugins/nyml_parser.js +236 -0
package/dist/plugins/nyml_parser.js.map +1 -0
package/dist/plugins/qrcode.d.ts +2 -0
package/dist/plugins/qrcode.d.ts.map +1 -0
package/dist/plugins/qrcode.js +21 -0
package/dist/plugins/qrcode.js.map +1 -0
package/dist/plugins/smiles.d.ts +2 -0
package/dist/plugins/smiles.d.ts.map +1 -0
package/dist/plugins/smiles.js +19 -0
package/dist/plugins/smiles.js.map +1 -0
package/dist/plugins/space.d.ts +2 -0
package/dist/plugins/space.d.ts.map +1 -0
package/dist/plugins/space.js +15 -0
package/dist/plugins/space.js.map +1 -0
package/dist/plugins/span.d.ts +3 -0
package/dist/plugins/span.d.ts.map +1 -0
package/dist/plugins/span.js +18 -0
package/dist/plugins/span.js.map +1 -0
package/dist/plugins/test.d.ts +2 -0
package/dist/plugins/test.d.ts.map +1 -0
package/dist/plugins/test.js +14 -0
package/dist/plugins/test.js.map +1 -0
package/dist/plugins/toc.d.ts +3 -0
package/dist/plugins/toc.d.ts.map +1 -0
package/dist/plugins/toc.js +62 -0
package/dist/plugins/toc.js.map +1 -0
package/dist/plugins/yaml.d.ts +2 -0
package/dist/plugins/yaml.d.ts.map +1 -0
package/dist/plugins/yaml.js +12 -0
package/dist/plugins/yaml.js.map +1 -0
package/dist/plugins/youtube.d.ts +2 -0
package/dist/plugins/youtube.d.ts.map +1 -0
package/dist/plugins/youtube.js +19 -0
package/dist/plugins/youtube.js.map +1 -0
package/dist/prepare-sources.d.ts +10 -0
package/dist/prepare-sources.d.ts.map +1 -0
package/dist/prepare-sources.js +31 -0
package/dist/prepare-sources.js.map +1 -0
package/dist/registry.d.ts +10 -0
package/dist/registry.d.ts.map +1 -0
package/dist/registry.js +24 -0
package/dist/registry.js.map +1 -0
package/dist/rules/block-dispatcher.d.ts +9 -0
package/dist/rules/block-dispatcher.d.ts.map +1 -0
package/dist/rules/block-dispatcher.js +108 -0
package/dist/rules/block-dispatcher.js.map +1 -0
package/dist/rules/inline-dispatcher.d.ts +9 -0
package/dist/rules/inline-dispatcher.d.ts.map +1 -0
package/dist/rules/inline-dispatcher.js +62 -0
package/dist/rules/inline-dispatcher.js.map +1 -0
package/dist/runtime.d.ts +3 -0
package/dist/runtime.d.ts.map +1 -0
package/dist/runtime.js +128 -0
package/dist/runtime.js.map +1 -0
package/package.json +70 -0
package/themes/beige-decent-1.css +559 -0
package/themes/beige-decent-2.css +578 -0
package/themes/common.css +178 -0
package/themes/dark-elegant-1.css +729 -0
package/themes/dark-elegant-2.css +1376 -0
package/themes/light-academic-1.css +541 -0
package/themes/light-academic-2.css +462 -0
package/themes/light-neat-1.css +1244 -0
package/themes/light-neat-2.css +1185 -0
package/themes/light-playful-1.css +493 -0
package/themes/light-playful-2.css +494 -0

package/themes/light-neat-2.css ADDED Viewed

@@ -0,0 +1,1185 @@
+/* ==========================================================================
+   Light Neat Theme 2 — markdown-it-customize
+   Epilogue (headings) · Literata / Source Sans 3 / Caveat / Fira Code (body options)
+   Optional modifiers on <body> or .markdown-body:
+   - .font-serif
+   - .font-sans
+   - .font-handwritten
+   - .font-typewrite
+   - .size-xs | .size-sm | .size-lg | .size-xl
+   ========================================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Source+Sans+3:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
+@import './common.css';
+:root {
+  color-scheme: light;
+  --bg: #f7f7f2;
+  --bg-soft: #fbfbf8;
+  --surface: #fffdfa;
+  --surface-2: #f8f6f1;
+  --surface-3: #f1eee7;
+  --border: #ddd8cd;
+  --border-strong: #c9c1b1;
+  --border-soft: #ece8de;
+  --text: #2d322f;
+  --text-soft: #62685f;
+  --text-muted: #8a8f87;
+  --heading: #181c1b;
+  --accent: #167a72;
+  --accent-2: #2f9f96;
+  --accent-ink: #175651;
+  --accent-warm: #d48f41;
+  --accent-dust: #8ca0ca;
+  --rule: rgba(22, 122, 114, 0.16);
+  --link: #0f6a85;
+  --link-hover: #0a4d60;
+  --link-visited: #5f6da9;
+  --code-bg: #f4f1eb;
+  --code-bg-2: #eeebe4;
+  --code-border: #d8d1c5;
+  --code-text: #36433d;
+  --inline-code: #8b4d1a;
+  --success-bg: rgba(95, 173, 120, 0.1);
+  --success-border: #b8dabf;
+  --success-text: #2e7a45;
+  --note-bg: rgba(137, 153, 213, 0.1);
+  --note-border: #ccd3f3;
+  --note-text: #52639e;
+  --info-bg: rgba(69, 150, 191, 0.1);
+  --info-border: #b8d8ea;
+  --info-text: #1e668d;
+  --warning-bg: rgba(228, 177, 72, 0.13);
+  --warning-border: #ecd39c;
+  --warning-text: #916516;
+  --danger-bg: rgba(211, 105, 105, 0.11);
+  --danger-border: #e9b8b8;
+  --danger-text: #994545;
+  --span-red: #b34a4a;
+  --span-yellow: #8f6711;
+  --span-green: #2f7c49;
+  --span-blue: #21698a;
+  --font-heading: 'Epilogue', system-ui, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
+  --font-body: 'Literata', Georgia, 'Noto Serif SC', 'Noto Serif TC', serif;
+  --font-code: 'Fira Code', 'JetBrains Mono', monospace;
+  --base-size: 1rem;
+  --line-height: 1.82;
+  --font-scale: 1;
+  --lh-copy: var(--line-height);
+  --lh-tight: 1.2;
+  --fs-50: calc(0.78 * var(--base-size) * var(--font-scale));
+  --fs-75: calc(0.9 * var(--base-size) * var(--font-scale));
+  --fs-100: calc(var(--base-size) * var(--font-scale));
+  --fs-200: calc(1.12 * var(--base-size) * var(--font-scale));
+  --fs-300: calc(1.26 * var(--base-size) * var(--font-scale));
+  --fs-400: calc(1.48 * var(--base-size) * var(--font-scale));
+  --fs-500: calc(1.9 * var(--base-size) * var(--font-scale));
+  --fs-600: calc(2.45 * var(--base-size) * var(--font-scale));
+  --space-1: 0.35rem;
+  --space-2: 0.64rem;
+  --space-3: 0.94rem;
+  --space-4: 1.35rem;
+  --space-5: 1.9rem;
+  --space-6: 2.7rem;
+  --radius-sm: 6px;
+  --radius: 14px;
+  --radius-lg: 22px;
+  --shadow: 0 16px 32px rgba(166, 155, 137, 0.16), 0 4px 12px rgba(166, 155, 137, 0.1);
+  --shadow-soft: 0 10px 22px rgba(190, 181, 166, 0.14), 0 2px 8px rgba(190, 181, 166, 0.08);
+  --transition: 180ms ease;
+  --markdown-body-max-width: 920px;
+  --markdown-body-padding: clamp(1.25rem, 3.4vw, 3rem);
+  --markdown-body-border: 1px solid var(--border-strong);
+  --markdown-body-radius: var(--radius-lg);
+  --markdown-body-shadow: var(--shadow);
+  --markdown-body-decorations-display: block;
+}
+body.font-serif,
+.markdown-body.font-serif {
+  --font-body: 'Literata', Georgia, 'Noto Serif SC', 'Noto Serif TC', serif;
+  --lh-copy: 1.84;
+}
+body.font-sans,
+.markdown-body.font-sans {
+  --font-body: 'Source Sans 3', system-ui, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
+  --lh-copy: 1.72;
+}
+body.font-handwritten,
+.markdown-body.font-handwritten {
+  --font-body: 'Hanzi Pen TC', 'Hanzi Pen SC', 'Caveat', 'Segoe Print', cursive;
+  --lh-copy: 1.9;
+}
+body.font-typewrite,
+.markdown-body.font-typewrite {
+  --font-body: 'Fira Code', monospace;
+  --lh-copy: 1.78;
+}
+body.size-xs,
+.markdown-body.size-xs {
+  --font-scale: 0.9;
+}
+body.size-sm,
+.markdown-body.size-sm {
+  --font-scale: 0.96;
+}
+body.size-lg,
+.markdown-body.size-lg {
+  --font-scale: 1.08;
+}
+body.size-xl,
+.markdown-body.size-xl {
+  --font-scale: 1.16;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+html {
+  font-size: var(--base-size);
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  padding: clamp(0.9rem, 2.5vw, 1.8rem);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)),
+    linear-gradient(90deg, transparent 0, transparent 27px, rgba(22, 122, 114, 0.03) 27px, transparent 28px),
+    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-100);
+  line-height: var(--lh-copy);
+}
+::selection {
+  background: rgba(47, 159, 150, 0.18);
+  color: var(--heading);
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.55);
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(22, 122, 114, 0.2);
+  border-radius: 999px;
+  border: 2px solid rgba(255, 255, 255, 0.75);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(22, 122, 114, 0.34);
+}
+.markdown-body {
+  display: flow-root;
+  position: relative;
+  max-width: var(--markdown-body-max-width);
+  margin: 0 auto;
+  padding: var(--markdown-body-padding);
+  background: var(--surface);
+  border: var(--markdown-body-border);
+  border-radius: var(--markdown-body-radius);
+  box-shadow: var(--markdown-body-shadow);
+}
+.markdown-body::before {
+  display: var(--markdown-body-decorations-display);
+  content: '';
+  position: absolute;
+  inset: 0.9rem;
+  border: 1px solid rgba(22, 122, 114, 0.08);
+  border-radius: calc(var(--radius-lg) - 8px);
+  pointer-events: none;
+}
+.markdown-body::after {
+  display: var(--markdown-body-decorations-display);
+  content: '';
+  position: absolute;
+  left: 1.2rem;
+  right: 1.2rem;
+  top: 1rem;
+  height: 1px;
+  background: repeating-linear-gradient(90deg, var(--rule) 0 8px, transparent 8px 16px);
+  pointer-events: none;
+}
+.markdown-body > :first-child {
+  margin-top: 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  clear: both;
+  position: relative;
+  margin: 2.15em 0 0.72em;
+  color: var(--heading);
+  font-family: var(--font-heading);
+  line-height: var(--lh-tight);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  scroll-margin-top: 4rem;
+}
+h1:first-child,
+h2:first-child,
+h3:first-child {
+  margin-top: 0;
+}
+h1 {
+  padding: 0.3em 0 0.48em;
+  font-size: clamp(2rem, 4.2vw, 3rem);
+  border-bottom: 2px solid var(--border-strong);
+}
+h1::before {
+  content: '';
+  display: block;
+  width: 3rem;
+  height: 3px;
+  background: var(--accent);
+  margin-bottom: 0.5rem;
+  border-radius: 999px;
+}
+h1::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 6rem;
+  height: 4px;
+  background: var(--accent);
+}
+h2 {
+  font-size: clamp(1.5rem, 3vw, 2.05rem);
+  padding-bottom: 0.3em;
+  border-bottom: 2px solid var(--border-strong);
+}
+h2::before {
+  display: none;
+}
+h3 {
+  display: block;
+  width: fit-content;
+  font-size: var(--fs-400);
+  padding: 0.18em 0.7rem 0.28em;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+h4 {
+  font-size: var(--fs-300);
+  color: #274542;
+}
+h5 {
+  font-size: var(--fs-200);
+  color: #4b625f;
+}
+h6 {
+  font-size: var(--fs-100);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-soft);
+}
+.header-anchor {
+  float: left;
+  margin-left: -1.25em;
+  padding-right: 0.3em;
+  color: var(--accent);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity var(--transition), color var(--transition);
+}
+h1:hover .header-anchor,
+h2:hover .header-anchor,
+h3:hover .header-anchor,
+h4:hover .header-anchor,
+h5:hover .header-anchor,
+h6:hover .header-anchor {
+  opacity: 0.7;
+}
+.header-anchor:hover {
+  color: var(--accent-ink);
+}
+p,
+ul,
+ol,
+blockquote,
+pre,
+table,
+.toc-wrapper,
+details.spoil,
+.tabs,
+.cols,
+.youtube-embed,
+.mermaid,
+.smiles-render {
+  margin: 0 0 var(--space-5);
+}
+p:last-child,
+ul:last-child,
+ol:last-child,
+blockquote:last-child,
+pre:last-child,
+table:last-child {
+  margin-bottom: 0;
+}
+a {
+  color: var(--link);
+  text-decoration-thickness: 1.4px;
+  text-decoration-style: solid;
+  text-decoration-color: rgba(15, 106, 133, 0.3);
+  text-underline-offset: 0.18em;
+  transition: color var(--transition), text-decoration-color var(--transition);
+}
+a:hover {
+  color: var(--link-hover);
+  text-decoration-color: rgba(10, 77, 96, 0.55);
+}
+a:visited {
+  color: var(--link-visited);
+}
+strong {
+  color: var(--heading);
+  font-weight: 700;
+}
+em {
+  color: #4f5953;
+}
+s,
+del {
+  color: var(--text-muted);
+  text-decoration-color: rgba(153, 69, 69, 0.3);
+}
+mark {
+  padding: 0.08em 0.3em;
+  color: #68460d;
+  background: rgba(228, 177, 72, 0.22);
+  border-radius: 0.25rem;
+}
+ins {
+  color: var(--accent-ink);
+  text-decoration: underline dotted rgba(22, 122, 114, 0.7) 2px;
+  text-underline-offset: 0.16em;
+}
+sub,
+sup {
+  font-size: 0.72em;
+  color: var(--text-soft);
+}
+code {
+  font-family: var(--font-code);
+  font-size: 0.9em;
+  color: var(--inline-code);
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: 7px;
+  padding: 0.16em 0.42em;
+}
+pre {
+  position: relative;
+  overflow-x: auto;
+  padding: 2rem 1.25rem 1.18rem;
+  background: linear-gradient(180deg, var(--code-bg) 0%, var(--code-bg-2) 100%);
+  border: 1px solid var(--code-border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-soft);
+}
+pre::before {
+  content: '';
+  position: absolute;
+  left: 1rem;
+  top: 0.75rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 999px;
+  background: #f0c060;
+  box-shadow: 1rem 0 0 #90c878, 2rem 0 0 #80b4e0;
+}
+pre code {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--code-text);
+  font-size: var(--fs-75);
+  line-height: 1.72;
+}
+blockquote {
+  position: relative;
+  padding: 1.15rem 1.25rem 1.15rem 1.55rem;
+  color: #49534f;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-soft);
+}
+blockquote::before {
+  content: '❝';
+  position: absolute;
+  left: 0.7rem;
+  top: 0.35rem;
+  color: rgba(22, 122, 114, 0.26);
+  font-size: 2rem;
+  line-height: 1;
+}
+blockquote blockquote {
+  margin-top: var(--space-4);
+  background: #fff;
+}
+blockquote > *:last-child {
+  margin-bottom: 0;
+}
+ul,
+ol {
+  padding-left: 1.45rem;
+}
+li {
+  margin-bottom: 0.45rem;
+}
+li > ul,
+li > ol {
+  margin-top: 0.42rem;
+  margin-bottom: 0;
+}
+ul {
+  list-style: none;
+}
+ul > li {
+  position: relative;
+}
+ul > li::before {
+  content: '';
+  position: absolute;
+  left: -1.05rem;
+  top: 0.76em;
+  width: 0.42rem;
+  height: 0.42rem;
+  background: var(--accent);
+  transform: rotate(45deg);
+}
+ol {
+  list-style: decimal;
+}
+.task-list-item {
+  list-style: none;
+  padding-left: 0;
+}
+.task-list-item::before {
+  display: none;
+}
+.task-list-item-checkbox,
+.task-list-item input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  width: 1.06rem;
+  height: 1.06rem;
+  margin: 0 0.55rem 0 0;
+  vertical-align: -0.12em;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  background: #fff;
+}
+.task-list-item-checkbox:checked,
+.task-list-item input[type='checkbox']:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.task-list-item-checkbox:checked::after,
+.task-list-item input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  left: 0.28rem;
+  top: 0.07rem;
+  width: 0.24rem;
+  height: 0.5rem;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.markdown-body > table,
+.markdown-body td table {
+  width: max-content;
+  max-width: 100%;
+}
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+}
+thead th {
+  padding: 0.8rem 1rem;
+  background: var(--surface-3);
+  border-bottom: 1px solid var(--border-strong);
+  color: var(--heading);
+  font-size: var(--fs-75);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-align: left;
+  white-space: nowrap;
+}
+tbody td {
+  padding: 0.86rem 1rem;
+  border-bottom: 1px solid var(--border-soft);
+  vertical-align: top;
+}
+tbody tr:nth-child(even) td {
+  background: rgba(0, 0, 0, 0.015);
+}
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+hr {
+  height: 1px;
+  margin: var(--space-6) 0;
+  border: 0;
+  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(22, 122, 114, 0.28) 12px 24px, transparent 24px 36px);
+}
+img {
+  margin: 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-soft);
+}
+p > img {
+  display: inline;
+  margin: 0;
+  border-radius: 10px;
+}
+.footnote-ref {
+  font-size: 0.85em;
+}
+.footnote-ref a,
+.footnote-backref {
+  color: var(--accent-ink);
+  text-decoration: none;
+}
+.footnotes-sep {
+  margin: var(--space-6) 0 var(--space-4);
+}
+.footnotes {
+  padding-top: var(--space-3);
+  border-top: 1px dashed var(--border-strong);
+  color: var(--text-soft);
+  font-size: var(--fs-75);
+}
+.footnotes ol {
+  margin-bottom: 0;
+}
+.footnotes li {
+  margin-bottom: 0.65rem;
+}
+.katex {
+  color: #23322f;
+  font-size: 1.05em;
+}
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0.85rem 1rem;
+  background: #fbfaf7;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+}
+.katex-error {
+  display: inline-block;
+  padding: 0.2em 0.46em;
+  color: var(--danger-text);
+  background: rgba(211, 105, 105, 0.12);
+  border: 1px solid var(--danger-border);
+  border-radius: 8px;
+  font-family: var(--font-code);
+  font-size: var(--fs-75);
+}
+div.success,
+div.note,
+div.info,
+div.warning,
+div.danger {
+  position: relative;
+  margin-bottom: var(--space-5);
+  padding: 1rem 1.1rem;
+  border: 1px solid;
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+}
+div.success::before,
+div.note::before,
+div.info::before,
+div.warning::before,
+div.danger::before {
+  content: '';
+  position: absolute;
+  top: 0.72rem;
+  right: 0.72rem;
+  width: 0.95rem;
+  height: 0.95rem;
+  border: 1px solid currentColor;
+  opacity: 0.35;
+}
+div.success {
+  color: var(--success-text);
+  background: var(--success-bg);
+  border-color: var(--success-border);
+}
+div.note {
+  color: var(--note-text);
+  background: var(--note-bg);
+  border-color: var(--note-border);
+}
+div.info {
+  color: var(--info-text);
+  background: var(--info-bg);
+  border-color: var(--info-border);
+}
+div.warning {
+  color: var(--warning-text);
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
+}
+div.danger {
+  color: var(--danger-text);
+  background: var(--danger-bg);
+  border-color: var(--danger-border);
+}
+div.success > :not(code):not(pre),
+div.note > :not(code):not(pre),
+div.info > :not(code):not(pre),
+div.warning > :not(code):not(pre),
+div.danger > :not(code):not(pre) {
+  color: inherit;
+}
+div.success > *:last-child,
+div.note > *:last-child,
+div.info > *:last-child,
+div.warning > *:last-child,
+div.danger > *:last-child {
+  margin-bottom: 0;
+}
+.left {
+  float: left;
+  max-width: min(44%, 22rem);
+  padding: 0.85rem 0.95rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+  margin: 0 var(--space-5) var(--space-4) 0;
+}
+.right {
+  text-align: right;
+  margin: 0 0 var(--space-5);
+}
+.center {
+  margin: 0 auto var(--space-5);
+  text-align: center;
+  max-width: min(100%, 42rem);
+}
+details.spoil {
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  background: var(--surface-2);
+  box-shadow: var(--shadow-soft);
+}
+details.spoil > summary {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.95rem 1.05rem;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  color: var(--heading);
+  font-weight: 700;
+  background: rgba(22, 122, 114, 0.06);
+}
+details.spoil > summary::-webkit-details-marker {
+  display: none;
+}
+details.spoil > summary::before {
+  content: '▣';
+  color: var(--accent);
+  font-size: 0.95rem;
+}
+details.spoil[open] > summary {
+  border-bottom: 1px dashed var(--border-strong);
+}
+details.spoil > :not(summary) {
+  padding: 1rem 1.05rem 1.1rem;
+}
+.tabs {
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+}
+.tabs-bar {
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  background: var(--surface-3);
+  border-bottom: 1px solid var(--border);
+  scrollbar-width: none;
+}
+.tabs-bar::-webkit-scrollbar {
+  display: none;
+}
+.tabs-bar-btn {
+  border: 0;
+  border-right: 1px solid var(--border);
+  padding: 0.72rem 1rem;
+  background: transparent;
+  color: var(--text-soft);
+  font: 700 var(--fs-75)/1.2 var(--font-heading);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--transition), background var(--transition);
+}
+.tabs-bar-btn:last-child {
+  border-right: 0;
+}
+.tabs-bar-btn:hover {
+  color: var(--heading);
+  background: rgba(255, 255, 255, 0.45);
+}
+.tabs-bar-btn.active {
+  color: #fff;
+  background: var(--accent);
+}
+.tab {
+  display: none;
+  padding: 1.08rem 1.12rem 1.22rem;
+}
+.tab.active {
+  display: block;
+}
+.tabs:not([data-js]) .tab {
+  display: block;
+}
+.tabs:not([data-js]) .tab + .tab {
+  border-top: 1px dashed var(--border-strong);
+}
+.cols {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  align-items: start;
+}
+.col {
+  min-width: 0;
+  padding: 1rem 1.02rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+}
+.col > *:last-child {
+  margin-bottom: 0;
+}
+.toc-wrapper {
+  position: relative;
+}
+nav.toc,
+.toc-list {
+  padding: 1rem 1.12rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  box-shadow: var(--shadow-soft);
+}
+nav.toc ul,
+.toc-list ul {
+  margin: 0;
+  padding-left: 1.05rem;
+}
+nav.toc li,
+.toc-list li {
+  margin-bottom: 0.28rem;
+}
+nav.toc li::before,
+.toc-list li::before {
+  display: none;
+}
+nav.toc a,
+.toc-list a {
+  color: var(--text-soft);
+  text-decoration: none;
+}
+nav.toc a:hover,
+.toc-list a:hover {
+  color: var(--accent-ink);
+}
+span.red {
+  color: var(--span-red);
+}
+span.yellow {
+  color: var(--span-yellow);
+}
+span.green {
+  color: var(--span-green);
+}
+span.blue {
+  color: var(--span-blue);
+}
+span.success,
+span.info,
+span.warning,
+span.danger {
+  padding: 0.18em 0.58em;
+  border: 1px solid;
+  border-radius: 7px;
+  font-size: 0.8em;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+span.success {
+  background: rgba(95, 173, 120, 0.13);
+  color: var(--success-text);
+  border-color: var(--success-border);
+}
+span.info {
+  background: rgba(69, 150, 191, 0.12);
+  color: var(--info-text);
+  border-color: var(--info-border);
+}
+span.warning {
+  background: rgba(228, 177, 72, 0.15);
+  color: var(--warning-text);
+  border-color: var(--warning-border);
+}
+span.danger {
+  background: rgba(211, 105, 105, 0.14);
+  color: var(--danger-text);
+  border-color: var(--danger-border);
+}
+div.test-block {
+  padding: 0.85rem 1rem;
+  margin-bottom: var(--space-5);
+  background: rgba(22, 122, 114, 0.08);
+  border: 1px dashed rgba(22, 122, 114, 0.3);
+  border-radius: 14px;
+  color: var(--accent-ink);
+  font-family: var(--font-code);
+  font-size: var(--fs-75);
+}
+span.test-inline {
+  display: inline-block;
+  padding: 0.12em 0.38em;
+  border-radius: 6px;
+  border: 1px dashed rgba(22, 122, 114, 0.3);
+  color: var(--accent-ink);
+  background: rgba(22, 122, 114, 0.1);
+  font-family: var(--font-code);
+  font-size: 0.88em;
+}
+div.youtube-embed {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 56.25%;
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  background: #ece7dd;
+  box-shadow: var(--shadow-soft);
+}
+div.youtube-embed iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+div.mermaid {
+  padding: 1.2rem;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--surface-2);
+  overflow-x: auto;
+  text-align: center;
+  box-shadow: var(--shadow-soft);
+}
+div.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+div.smiles-render {
+  box-shadow: none;
+}
+div.smiles-render canvas,
+canvas[data-smiles] {
+  border-radius: 0;
+  box-shadow: none;
+}
+span.qrcode {
+  padding: 6px;
+  vertical-align: middle;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--shadow-soft);
+}
+/* --------------------------------------------------------------------------
+   Focus indicators
+   -------------------------------------------------------------------------- */
+a:focus-visible,
+.tabs-bar-btn:focus-visible,
+details.spoil > summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+}
+.task-list-item-checkbox:focus-visible,
+.task-list-item input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+@media (max-width: 720px) {
+  body {
+    padding: 0.7rem;
+  }
+  .markdown-body {
+    padding: 1.05rem;
+    box-shadow: 0 10px 22px rgba(166, 155, 137, 0.14), 0 3px 8px rgba(166, 155, 137, 0.08);
+  }
+  .left {
+    float: none;
+    max-width: 100%;
+    margin: 0 0 var(--space-4);
+  }
+  .cols {
+    grid-template-columns: 1fr;
+  }
+  .header-anchor {
+    margin-left: -1.05em;
+  }
+}
+@media print {
+  body {
+    padding: 0;
+    background: #fff;
+    color: #111;
+  }
+  .markdown-body {
+    max-width: 100%;
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+  }
+  .markdown-body::before,
+  .markdown-body::after,
+  .header-anchor,
+  .tabs-bar,
+  div.youtube-embed {
+    display: none !important;
+  }
+  a {
+    color: #0b57d0;
+    text-decoration-color: currentColor;
+  }
+  pre,
+  code,
+  blockquote,
+  .success,
+  .note,
+  .info,
+  .warning,
+  .danger,
+  nav.toc,
+  .toc-list,
+  .col,
+  details.spoil,
+  div.mermaid,
+  div.smiles-render {
+    background: #fff !important;
+    color: #111 !important;
+    border-color: #d0d0d0 !important;
+    box-shadow: none !important;
+  }
+  span.success,
+  span.info,
+  span.warning,
+  span.danger {
+    border-color: #bdbdbd !important;
+    color: #111 !important;
+  }
+  tr,
+  iframe,
+  video,
+  pre,
+  blockquote {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}