PageSourceSearch

https://1989ryan.github.io/projects/paragon.html

html 1989ryan.github.io collected 2026-10-03 08:31:15 UTC 36,345 bytes, 895 lines download raw bytes

1<!doctype html>
2<html>
3<head>
4<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
5
6<link href='https://fonts.loli.net/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color: #ffffff; --text-color: #333333; --select-text-bg-color: #B5D6FC; --select-text-font-color: auto; --monospace: "Lucida Console",Consolas,"Courier",monospace; --title-bar-height: 20px; }
7.mac-os-11 { --title-bar-height: 28px; }
8html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
9h1, h2, h3, h4, h5 { white-space: pre-wrap; }
10body { margin: 0px; padding: 0px; height: auto; inset: 0px; font-size: 1rem; line-height: 1.428571; overflow-x: hidden; background: inherit; tab-size: 4; }
11iframe { margin: auto; }
12a.url { word-break: break-all; }
13a:active, a:hover { outline: 0px; }
14.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
15#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px; }
16#write.first-line-indent p { text-indent: 2em; }
17#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
18#write.first-line-indent li { margin-left: 2em; }
19.for-image #write { padding-left: 8px; padding-right: 8px; }
20body.typora-export { padding-left: 30px; padding-right: 30px; }
21.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
22.typora-export .task-list-item input { pointer-events: none; }
23@media screen and (max-width: 500px) {
24  body.typora-export { padding-left: 0px; padding-right: 0px; }
25  #write { padding-left: 20px; padding-right: 20px; }
26}
27#write li > figure:last-child { margin-bottom: 0.5rem; }
28#write ol, #write ul { position: relative; }
29img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
30button, input, select, textarea { color: inherit; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; }
31input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
32*, ::after, ::before { box-sizing: border-box; }
33#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
34#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
35p { line-height: inherit; }
36h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
37p { orphans: 4; }
38h1 { font-size: 2rem; }
39h2 { font-size: 1.8rem; }
40h3 { font-size: 1.6rem; }
41h4 { font-size: 1.4rem; }
42h5 { font-size: 1.2rem; }
43h6 { font-size: 1rem; }
44.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
45.hidden { display: none; }
46.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
47a { cursor: pointer; }
48sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
49sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
50#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
51figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
52figure > table { margin: 0px; }
53thead, tr { break-inside: avoid; break-after: auto; }
54thead { display: table-header-group; }
55table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
56table.md-table td { min-width: 32px; }
57.CodeMirror-gutters { border-right-width: 0px; border-right-style: none; border-right-color: currentcolor; background-color: inherit; }
58.CodeMirror-linenumber { -webkit-user-select: none; }
59.CodeMirror { text-align: left; }
60.CodeMirror-placeholder { opacity: 0.3; }
61.CodeMirror pre { padding: 0px 4px; }
62.CodeMirror-lines { padding: 0px; }
63div.hr:focus { cursor: none; }
64#write pre { white-space: pre-wrap; }
65#write.fences-no-line-wrapping pre { white-space: pre; }
66#write pre.ty-contain-cm { white-space: normal; }
67.CodeMirror-gutters { margin-right: 4px; }
68.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
69.md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
70#write .md-fences.mock-cm { white-space: pre-wrap; }
71.md-fences.md-fences-with-lineno { padding-left: 0px; }
72#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
73.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
74.CodeMirror-line, twitterwidget { break-inside: avoid; }
75svg { break-inside: avoid; }
76.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
77.footnotes + .footnotes { margin-top: 0px; }
78.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
79li div { padding-top: 0px; }
80blockquote { margin: 1rem 0px; }
81li .mathjax-block, li p { margin: 0.5rem 0px; }
82li blockquote { margin: 1rem 0px; }
83li { margin: 0px; position: relative; }
84blockquote > :last-child { margin-bottom: 0px; }
85blockquote > :first-child, li > :first-child { margin-top: 0px; }
86.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
87#write .footnote-line { white-space: pre-wrap; }
88@media print {
89  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
90  #write { margin-top: 0px; border-color: transparent !important; padding-top: 0px !important; padding-bottom: 0px !important; }
91  .typora-export * { print-color-adjust: exact; }
92  .typora-export #write { break-after: avoid; }
93  .typora-export #write::after { height: 0px; }
94  .is-mac table { break-inside: avoid; }
95  #write > p:nth-child(1) { margin-top: 0px; }
96  .typora-export-show-outline .typora-export-sidebar { display: none; }
97  figure { overflow-x: visible; }
98}
99.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
100a img, img a { cursor: pointer; }
101pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
102p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
103#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
104p > .md-image:only-child { display: inline-block; width: 100%; }
105#write .MathJax_Display { margin: 0.8em 0px 0px; }
106.md-math-block { width: 100%; }
107.md-math-block:not(:empty)::after { display: none; }
108.MathJax_ref { fill: currentcolor; }
109[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
110.md-task-list-item { position: relative; list-style-type: none; }
111.task-list-item.md-task-list-item { padding-left: 0px; }
112.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: medium; }
113.math { font-size: 1rem; }
114.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
115.md-toc-content { position: relative; margin-left: 0px; }
116.md-toc-content::after, .md-toc::after { display: none; }
117.md-toc-item { display: block; color: rgb(65, 131, 196); }
118.md-toc-item a { text-decoration: none; }
119.md-toc-inner:hover { text-decoration: underline; }
120.md-toc-inner { display: inline-block; cursor: pointer; }
121.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
122.md-toc-h2 .md-toc-inner { margin-left: 2em; }
123.md-toc-h3 .md-toc-inner { margin-left: 4em; }
124.md-toc-h4 .md-toc-inner { margin-left: 6em; }
125.md-toc-h5 .md-toc-inner { margin-left: 8em; }
126.md-toc-h6 .md-toc-inner { margin-left: 10em; }
127@media screen and (max-width: 48em) {
128  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
129  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
130  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
131  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
132}
133a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
134.footnote-line a:not(.reversefootnote) { color: inherit; }
135.reversefootnote { font-family: ui-monospace, sans-serif; }
136.md-attr { display: none; }
137.md-fn-count::after { content: "."; }
138code, pre, samp, tt { font-family: var(--monospace); }
139kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
140.md-comment { color: rgb(162, 127, 3); opacity: 0.6; font-family: var(--monospace); }
141code { text-align: left; vertical-align: initial; }
142a.md-print-anchor { white-space: pre !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
143.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
144.md-diagram-panel > svg { max-width: 100%; }
145[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
146[lang="mermaid"] .node text { font-size: 1rem; }
147table tr th { border-bottom-width: 0px; border-bottom-style: none; border-bottom-color: currentcolor; }
148video { max-width: 100%; display: block; margin: 0px auto; }
149iframe { max-width: 100%; width: 100%; border: medium; }
150.highlight td, .highlight tr { border: 0px; }
151mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
152.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
153.md-expand mark .md-meta { opacity: 0.3 !important; }
154mark .md-meta { color: rgb(0, 0, 0); }
155@media print {
156  .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
157}
158.md-diagram-panel .messageText { stroke: none !important; }
159.md-diagram-panel .start-state { fill: var(--node-fill); }
160.md-diagram-panel .edgeLabel rect { opacity: 1 !important; }
161.md-fences.md-fences-math { font-size: 1em; }
162.md-fences-advanced:not(.md-focus) { padding: 0px; white-space: nowrap; border: 0px; }
163.md-fences-advanced:not(.md-focus) { background: inherit; }
164.typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row; }
165.typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px; }
166.typora-export-show-outline #write { --webkit-flex: 2; flex: 2 1 0%; }
167.typora-export-sidebar .outline-content { position: fixed; top: 0px; max-height: 100%; overflow: hidden auto; padding-bottom: 30px; padding-top: 60px; width: 300px; }
168@media screen and (max-width: 1024px) {
169  .typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px; }
170}
171@media screen and (max-width: 800px) {
172  .typora-export-sidebar { display: none; }
173}
174.outline-content li, .outline-content ul { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none;
174 overflow-wrap: anywhere; }
175.outline-content ul { margin-top: 0px; margin-bottom: 0px; }
176.outline-content strong { font-weight: 400; }
177.outline-expander { width: 1rem; height: 1.428571rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px; }
178.outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle; }
179.outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer; }
180.outline-expander:hover::before { content: ""; }
181.outline-h1 > .outline-item { padding-left: 0px; }
182.outline-h2 > .outline-item { padding-left: 1em; }
183.outline-h3 > .outline-item { padding-left: 2em; }
184.outline-h4 > .outline-item { padding-left: 3em; }
185.outline-h5 > .outline-item { padding-left: 4em; }
186.outline-h6 > .outline-item { padding-left: 5em; }
187.outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit; }
188.outline-label:hover { text-decoration: underline; }
189.outline-item:hover { border-color: rgb(245, 245, 245); background-color: var(--item-hover-bg-color); }
190.outline-item:hover { margin-left: -28px; margin-right: -28px; border-left-width: 28px; border-left-style: solid; border-left-color: transparent; border-right-width: 28px; border-right-style: solid; border-right-color: transparent; }
191.outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none; }
192.outline-item-open > .outline-item > .outline-expander::before { content: ""; }
193.outline-children { display: none; }
194.info-panel-tab-wrapper { display: none; }
195.outline-item-open > .outline-children { display: block; }
196.typora-export .outline-item { padding-top: 1px; padding-bottom: 1px; }
197.typora-export .outline-item:hover { margin-right: -8px; border-right-width: 8px; border-right-style: solid; border-right-color: transparent; }
198.typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px; }
199.typora-export .outline-expander:hover::before, .typora-export .outline-item-open > .outline-item > .outline-expander::before { content: "−"; }
200.typora-export-collapse-outline .outline-children { display: none; }
201.typora-export-collapse-outline .outline-item-open > .outline-children, .typora-export-no-collapse-outline .outline-children { display: block; }
202.typora-export-no-collapse-outline .outline-expander::before { content: "" !important; }
203.typora-export-show-outline .outline-item-active > .outline-item .outline-label { font-weight: 700; }
204.md-inline-math-container mjx-container { zoom: 0.95; }
205mjx-container { break-inside: avoid; }
206
207
208.CodeMirror { height: auto; }
209.CodeMirror.cm-s-inner { background: inherit; }
210.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
211.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
212.CodeMirror-gutters { border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); background: inherit; white-space: nowrap; }
213.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
214.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
215.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
216.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
217.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
218.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
219.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
220.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
221.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
222.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
223.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
224.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
225.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
226.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
227.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
228.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
229.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
230.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
231.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
232.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
233.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
234.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
235.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
236.cm-negative { color: rgb(221, 68, 68); }
237.cm-positive { color: rgb(34, 153, 34); }
238.cm-header, .cm-strong { font-weight: 700; }
239.cm-del { text-decoration: line-through; }
240.cm-em { font-style: italic; }
241.cm-link { text-decoration: underline; }
242.cm-error { color: red; }
243.cm-invalidchar { color: red; }
244.cm-constant { color: rgb(38, 139, 210); }
245.cm-defined { color: rgb(181, 137, 0); }
246div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
247div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
248.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
249.CodeMirror { position: relative; overflow: hidden; }
250.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
251.CodeMirror-sizer { position: relative; }
252.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; outline: 0px; }
253.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
254.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: auto hidden; }
255.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
256.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
257.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 10px; z-index: 3; overflow-y: hidden; }
258.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
259.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: medium !important; }
260.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
261.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
262.CodeMirror-lines { cursor: text; }
263.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
264.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
265.CodeMirror-code pre { border-right-width: 30px; border-right-style: solid; border-right-color: transparent; width: fit-content; }
266.CodeMirror-wrap .CodeMirror-code pre { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; width: auto; }
267.CodeMirror-linebackground { position: absolute; inset: 0px; z-index: 0; }
268.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
269.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
270.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
271.CodeMirror-measure pre { position: static; }
272.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; width: 0px; }
273.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
274.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
275.cm-searching { background: rgba(255, 255, 0, 0.4); }
276span.cm-underlined { text-decoration: underline; }
277span.cm-strikethrough { text-decoration: line-through; }
278.cm-tw-syntaxerror { color: rgb(255, 255, 255); background-color: rgb(153, 0, 0); }
279.cm-tw-deleted { text-decoration: line-through; }
280.cm-tw-header5 { font-weight: 700; }
281.cm-tw-listitem:first-child { padding-left: 10px; }
282.cm-tw-box { border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: inherit; border-top-width: 0px !important; }
283.cm-tw-underline { text-decoration: underline; }
284@media print {
285  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
286}
287
288
289/* meyer reset -- http://meyerweb.com/eric/tools/css/reset/ , v2.0 | 20110126 | License: none (public domain) */
290
291@include-when-export url(https://fonts.loli.net/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);
292
293/* =========== */
294
295/* pt-serif-regular - latin */
296/* pt-serif-italic - latin */
297/* pt-serif-700 - latin */
298/* pt-serif-700italic - latin */
299:root {
300	--active-file-bg-color: #dadada;
301	--active-file-bg-color: rgba(32, 43, 51, 0.63);
302	--active-file-text-color: white;
303	--bg-color: #f3f2ee;
304	--text-color: #1f0909;
305	--control-text-color: #444;
306	--rawblock-edit-panel-bd: #e5e5e5;
307
308	--select-text-bg-color: rgba(32, 43, 51, 0.63);
309  --select-text-font-color: white;
310}
311
312pre {
313	--select-text-bg-color: #36284e;
314	--select-text-font-color: #fff;
315}
316
317html {
318	font-size: 16px;
319	-webkit-font-smoothing: antialiased;
320}
321
322html, body {
323	background-color: #f3f2ee;
324	font-family: "PT Serif", 'Times New Roman', Times, serif;
325	color: #1f0909;
326	line-height: 1.5em;
327}
328
329/*#write {
330	overflow-x: auto;
331    max-width: initial;
332	padding-left: calc(50% - 17em);
333    padding-right: calc(50% - 17em);
334}
335
336@media (max-width: 36em) {
337 	#write {
338 		padding-left: 1em;
339    	padding-right: 1em;
340 	}
341}*/
342
343#write {
344	max-width: 40em;
345}
346
347@media only screen and (min-width: 1400px) {
348	#write {
349			max-width: 914px;
350	}
351}
352
353ol li {
354	list-style-type: decimal;
355	list-style-position: outside;
356}
357ul li {
358	list-style-type: disc;
359	list-style-position: outside;
360}
361
362ol,
363ul {
364	list-style: none;
365}
366
367blockquote,
368q {
369	quotes: none;
370}
371blockquote:before,
372blockquote:after,
373q:before,
374q:after {
375	content: '';
376	content: none;
377}
378table {
379	border-collapse: collapse;
380	border-spacing: 0;
381}
382/* styles */
383
384/* ====== */
385
386/* headings */
387
388h1,
389h2,
390h3,
391h4,
392h5,
393h6 {
394	font-weight: bold;
395}
396h1 {
397	font-size: 1.875em;
398	/*30 / 16*/
399	line-height: 1.6em;
400	/* 48 / 30*/
401	margin-top: 2em;
402}
403h2,
404h3 {
405	font-size: 1.3125em;
406	/*21 / 16*/
407	line-height: 1.15;
408	/*24 / 21*/
409	margin-top: 2.285714em;
410	/*48 / 21*/
411	margin-bottom: 1.15em;
412	/*24 / 21*/
413}
414h3 {
415	font-weight: normal;
416}
417h4 {
418	font-size: 1.125em;
419	/*18 / 16*/
420	margin-top: 2.67em;
421	/*48 / 18*/
422}
423h5,
424h6 {
425	font-size: 1em;
426	/*16*/
427}
428h1 {
429	border-bottom: 1px solid;
430	margin-bottom: 1.875em;
431	padding-bottom: 0.8125em;
432}
433/* links */
434
435a {
436	text-decoration: none;
437	color: #065588;
438}
439a:hover,
440a:active {
441	text-decoration: underline;
442}
443/* block spacing */
444
445p,
446blockquote,
447.md-fences {
448	margin-bottom: 1.5em;
449}
450h1,
451h2,
452h3,
453h4,
454h5,
455h6 {
456	margin-bottom: 1.5em;
457}
458/* blockquote */
459
460blockquote {
461	font-style: italic;
462	border-left: 5px solid;
463	margin-left: 2em;
464	padding-left: 1em;
465}
466/* lists */
467
468ul,
469ol {
470	margin: 0 0 1.5em 1.5em;
471}
472/* tables */
473.md-meta,.md-before, .md-after {
474	color:#999;
475}
476
477table {
478	margin-bottom: 1.5em;
479	/*24 / 16*/
480	font-size: 1em;
481	/* width: 100%; */
482}
483thead th,
484tfoot th {
485	padding: .25em .25em .25em .4em;
486	text-transform: uppercase;
487}
488th {
489	text-align: left;
490}
491td {
492	vertical-align: top;
493	padding: .25em .25em .25em .4em;
494}
495
496code,
497.md-fences {
498	background-color: #dadada;
499}
500
501code {
502	padding-left: 2px;
503	padding-right: 2px;
504}
505
506.md-fences {
507	margin-left: 2em;
508	margin-bottom: 3em;
509	padding-left: 1ch;
510	padding-right: 1ch;
511}
512
513pre,
514code,
515tt {
516	font-size: .875em;
517	line-height: 1.714285em;
518}
519/* some fixes */
520
521h1 {
522	line-height: 1.3em;
523	font-weight: normal;
524	margin-bottom: 0.5em;
525}
526
527p + ul,
528p + ol{
529	margin-top: .5em;
530}
531
532h3 + ul,
533h4 + ul,
534h5 + ul,
535h6 + ul,
536h3 + ol,
537h4 + ol,
538h5 + ol,
539h6 + ol {
540	margin-top: .5em;
541}
542
543li > ul,
544li > ol {
545	margin-top: inherit;
546	margin-bottom: 0;
547}
548
549li ol>li {
550	list-style-type: lower-alpha;
551}
552
553li li ol>li{
554	list-style-type: lower-roman;
555}
556
557h2,
558h3 {
559	margin-bottom: .75em;
560}
561hr {
562	border-top: none;
563	border-right: none;
564	border-bottom: 1px solid;
565	border-left: none;
566}
567h1 {
568	border-color: #c5c5c5;
569}
570blockquote {
571	border-color: #bababa;
572	color: #656565;
573}
574
575blockquote ul,
576blockquote ol {
577	margin-left:0;
578}
579
580.ty-table-edit {
581	background-color: transparent;
582}
583thead {
584	background-color: #dadada;
585}
586tr:nth-child(even) {
587	background: #e8e7e7;
588}
589hr {
590	border-color: #c5c5c5;
591}
592.task-list{
593	padding-left: 1rem;
594}
595
596.md-task-list-item {
597	padding-left: 1.5rem;
598	list-style-type: none;
599}
600
601.md-task-list-item > input:before {
602	content: '\221A';
603	display: inline-block;
604	width: 1.25rem;
605  	height: 1.6rem;
606	vertical-align: middle;
607	text-align: center;
608	color: #ddd;
609	background-color: #F3F2EE;
610}
611
612.md-task-list-item > input:checked:before,
613.md-task-list-item > input[checked]:before{
614	color: inherit;
615}
616
617#write pre.md-meta-block {
618	min-height: 1.875rem;
619	color: #555;
620	border: 0px;
621	background: transparent;
622	margin-top: -4px;
623	margin-left: 1em;
624	margin-top: 1em;
625}
626
627.md-image>.md-meta {
628	color: #9B5146;
629}
630
631.md-image>.md-meta{
632	font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', serif;
633}
634
635
636#write>h3.md-focus:before{
637	left: -1.5rem;
638	color:#999;
639	border-color:#999;
640}
641#write>h4.md-focus:before{
642	left: -1.5rem;
643	top: .25rem;
644	color:#999;
645	border-color:#999;
646}
647#write>h5.md-focus:before{
648	left: -1.5rem;
649	top: .0.3125rem;
650	color:#999;
651	border-color:#999;
652}
653#write>h6.md-focus:before{
654	left: -1.5rem;
655	top: 0.3125rem;
656	color:#999;
657	border-color:#999;
658}
659
660.md-toc:focus .md-toc-content{
661	margin-top: 19px;
662}
663
664.md-toc-content:empty:before{
665	color: #065588;
666}
667.md-toc-item {
668	color: #065588;
669}
670#write div.md-toc-tooltip {
671	background-color: #f3f2ee;
672}
673
674#typora-sidebar {
675	background-color: #f3f2ee;
676	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
677  	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
678}
679
680.pin-outline #typora-sidebar {
681	background: inherit;
682	box-shadow: none;
683	border-right: 1px dashed;
684}
685
686.pin-outline #typora-sidebar:hover .outline-title-wrapper {
687	border-left:1px dashed;
688}
689
690.outline-item:hover {
691  background-color: #dadada;
692  border-left: 28px solid #dadada;
693  border-right: 18px solid #dadada;
694}
695
696.typora-node .outline-item:hover {
697  	border-right: 28px solid #dadada;
698}
699
700.outline-expander:before {
701  content: "\f0da";
702  font-family: FontAwesome;
703  font-size:14px;
704  top: 1px;
705}
706
707.outline-expander:hover:before,
708.outline-item-open>.outline-item>.outline-expander:before {
709  content: "\f0d7";
710}
711
712.modal-content {
713	background-color: #f3f2ee;
714}
715
716.auto-suggest-container ul li {
717	list-style-type: none;
718}
719
720/** UI for electron */
721
722.megamenu-menu,
723#top-titlebar, #top-titlebar *,
724.megamenu-content {
725	background: #f3f2ee;
726	color: #1f0909;
727}
728
729.megamenu-menu-header {
730	border-bottom: 1px dashed #202B33;
731}
732
733.megamenu-menu {
734	box-shadow: none;
735	border-right: 1px dashed;
736}
737
738header, .context-menu, .megamenu-content, footer {
739	font-family: "PT Serif", 'Times New Roman', Times, serif;
740    color: #1f0909;
741}
742
743#megamenu-back-btn {
744	color: #1f0909;
745	border-color: #1f0909;
746}
747
748.megamenu-menu-header #megamenu-menu-header-title:before {
749	color: #1f0909;
750}
751
752.megamenu-menu-list li a:hover, .megamenu-menu-list li a.active {
753	color: inherit;
754	background-color: #e8e7df;
755}
756
757.long-btn:hover {
758	background-color: #e8e7df;
759}
760
761#recent-file-panel tbody tr:nth-child(2n-1) {
762    background-color: transparent !important;
763}
764
765.megamenu-menu-panel tbody tr:hover td:nth-child(2) {
766    color: inherit;
767}
768
769.megamenu-menu-panel .btn {
770	background-color: #D2D1D1;
771}
772
773.btn-default {
774	background-color: transparent;
775}
776
777.typora-sourceview-on #toggle-sourceview-btn,
778.ty-show-word-count #footer-word-count {
779	background: #c7c5c5;
780}
781
782#typora-quick-open {
783    background-color: inherit;
784}
785
786.md-diagram-panel {
787	margin-top: 8px;
788}
789
790.file-list-item-file-name {
791	font-weight: initial;
792}
793
794.file-list-item-summary {
795	opacity: 1;
796}
797
798.file-list-item {
799	color: #777;
800}
801
802.file-list-item.active {
803	background-color: inherit;
804	color: black;
805}
806
807.ty-side-sort-btn.active {
808	background-color: inherit;
809}
810
811.file-list-item.active .file-list-item-file-name  {
812	font-weight: bold;
813}
814
815.file-list-item{
816    opacity:1 !important;
817}
818
819.file-library-node.active>.file-node-background{
820	background-color: rgba(32, 43, 51, 0.63);
821	background-color: var(--active-file-bg-color);
822}
823
824.file-tree-node.active>.file-node-content{
825	color: white;
826	color: var(--active-file-text-color);
827}
828
829.md-task-list-item>input {
830	margin-left: -1.7em;
831	margin-top: calc(1rem - 12px);
832	-webkit-appearance: button;
833}
834
835input {
836	border: 1px solid #aaa;
837}
838
839.megamenu-menu-header #megamenu-menu-header-title,
840.megamenu-menu-header:hover, 
841.megamenu-menu-header:focus {
842	color: inherit;
843}
844
845.dropdown-menu .divider {
846	border-color: #e5e5e5;
847	opacity: 1;
848}
849
850/* https://github.com/typora/typora-issues/issues/2046 */
851.os-windows-7 strong,
852.os-windows-7 strong  {
853	font-weight: 760;
854}
855
856.ty-preferences .btn-default {
857	background: transparent;
858}
859
860.ty-preferences .window-header {
861	border-bottom: 1px dashed #202B33;
862	box-shadow: none;
863}
864
865#sidebar-loading-template, #sidebar-loading-template.file-list-item {
866	color: #777;
867}
868
869.searchpanel-search-option-btn.active {
870	background: #777;
871	color: white;
872}
873
874.export-detail, .light .export-detail, 
875.light .export-item.active, 
876.light .export-items-list-control {
877	background: #e0e0e0;
878	border-radius: 2px;
879	font-weight: 700;
880	color: inherit
881}
882
883 @media print { @page {margin: 0 0 0 0;} body.typora-export {padding-left: 0; padding-right: 0;} #write {padding:0;}}
884</style><title>ParaGon</title>
885</head>
886<body class='typora-export'><div class='typora-export-content'>
887<div id='write'  class=''><h1 id='centerdifferentiable-parsing-and-visual-grounding-of-human-language-instructions-for-object-placementcenter'><center><span>Differentiable Parsing and Visual Grounding of Natural Language Instructions for Object Placement</span></center></h1><center>
888  ICRA 2023<br>
889  Zirui Zhao, Wee Sun Lee, David Hsu<br>
890  School of Computing, National University of Singapore</center>
891<center>[<a href='https://arxiv.org/pdf/2210.00215.pdf'>paper</a>] [<a href='./appendix.pdf'>appendix</a>] [<a href='https://github.com/1989Ryan/paragon'>
891code</a>]</center>
892<iframe width="720" height="540" src="https://www.youtube.com/embed/nR26m7UT7bY" title="Differentiable Parsing and Visual Grounding of Human Language Instructions for Object Placement" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
893<h2 id='abstract'><span>Abstract</span></h2><p><span>We present a new method, PARsing And visual GrOuNding (PARAGON), for grounding natural language in object placement tasks. Natural language generally describes objects and spatial relations with compositionality and ambiguity, two major obstacles to effective language grounding. For compositionality, Paragon parses a language instruction into an object-centric graph representation to ground objects individually. For ambiguity, Paragon uses a novel particle-based graph neural network to reason about object placements with uncertainty. Essentially, Paragon integrates a parsing algorithm into a probabilistic, data-driven learning framework. It is fully differentiable and trained end-to-end from data for robustness against complex, ambiguous language input.</span></p><p><img src="/Users/mba/GitHub/1989Ryan.github.io/projects/paragon/ParaGon_Overview.png" style="zoom:200%;" /></p><h2 id='paragon'><span>ParaGon</span></h2><p><span>ParaGon integrates parsing-based methods into a probabilistic, data-driven framework. It exhibits robustness from its data-driven property, as well as generalizability and data efficiency due to its parsing-based nature. </span></p><p><img src="/Users/mba/GitHub/1989Ryan.github.io/projects/paragon/modules.png" referrerpolicy="no-referrer"></p><p><span>ParaGon reduces the complexity of embedding-based grounding by parsing complex sentences into simple, compositional structures and learns generalizable parsing rules from data to improve robustness. It further adapts to the uncertainty of ambiguous instructions using particle-based probabilistic techniques. The experiments show that ParaGon outperforms the state-of-the-art method in language-conditioned object placement tasks in the presence of ambiguity and compositionality. Our experiments involve real, noisy human instructions and photo-realistic visual data, reflecting the difficulties of language grounding in realistic situations to show ParaGon&#39;s potential for real-world application. </span></p><h2 id='citation'><span>Citation</span></h2><p><span>If ParaGon is useful in your research, please cite:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="bibtex"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="bibtex"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 10px; left: 4px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: currentcolor;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: currentcolor;"><div class="CodeMirror-measure"><pre>x</pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">@INPROCEEDINGS{zhao2023paragon,</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">
893  author={Zhao, Zirui and Lee, Wee Sun and Hsu, David},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  booktitle={2023 IEEE International Conference on Robotics and Automation (ICRA)}, </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  title={Differentiable Parsing and Visual Grounding of Natural Language Instructions for Object Placement}, </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  year={2023},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  volume={},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  number={},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  pages={11546-11553},</span></pre><div class="" style="position: relative;"><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">  doi={10.1109/ICRA48891.2023.10160640}}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 264px;"></div><div class="CodeMirror-gutters" style="display: none; height: 264px;"></div></div></div></pre><p>&nbsp;</p></div></div>
894</body>
895</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.