2 display: flex;
3 flex-direction: column;
4 height: 100vh;
5}
7.topbar {
8 display: flex;
9 align-items: center;
10 gap: 10px;
11 padding: 8px 14px;
12 border-bottom: 1px solid #ddd;
13 background: #fafafa;
14 flex: 0 0 auto;
15}
17.topbar .title {
18 font-weight: 600;
19 font-size: 15px;
20}
22.topbar .subtitle {
23 color: #777;
24 font-size: 13px;
25}
27.topbar .spacer {
28 flex: 1;
29}
31.topbar .url-size {
32 color: #777;
33 font-size: 12px;
34 font-variant-numeric: tabular-nums;
35}
37.topbar button {
38 font-size: 13px;
39 padding: 4px 12px;
40 border: 1px solid #ccc;
41 border-radius: 5px;
42 background: #fff;
43 cursor: pointer;
44}
46.topbar button:hover {
47 background: #f0f0f0;
48}
50.topbar button.primary {
51 background: #2563eb;
52 border-color: #2563eb;
53 color: #fff;
54}
56.topbar button.primary:hover {
57 background: #1d4ed8;
58}
60.panes {
61 display: flex;
62 flex: 1;
63 min-height: 0;
64}
66.pane {
67 min-width: 0;
68 overflow: hidden;
69 display: flex;
70 flex-direction: column;
71}
73.pane-preview {
74 flex: 1;
75 overflow-y: auto;
76}
78.splitter {
79 flex: 0 0 6px;
80 cursor: col-resize;
81 background: #eee;
82 border-left: 1px solid #ddd;
83 border-right: 1px solid #ddd;
84}
86.splitter:hover {
87 background: #d5e3fb;
88}
90.editor-container {
91 height: 100%;
92 overflow: hidden;
93}
95.editor-container .cm-editor {
96 height: 100%;
97}
99/* --- rendered markdown --- */
101.preview {
102 padding: 18px 28px 60px;
103 max-width: 820px;
104 font-size: 15px;
105 line-height: 1.6;
106}
108.preview h1,
109.preview h2,
110.preview h3,
111.preview h4 {
112 line-height: 1.25;
113 margin-top: 1.4em;
114 margin-bottom: 0.5em;
115}
117.preview h1:first-child {
118 margin-top: 0.3em;
119}
121.preview h1 {
122 font-size: 1.7em;
123 border-bottom: 1px solid #eee;
124 padding-bottom: 0.2em;
125}
127.preview h2 {
128 font-size: 1.35em;
129 border-bottom: 1px solid #f0f0f0;
130 padding-bottom: 0.15em;
131}
133.preview h3 {
134 font-size: 1.15em;
135}
137.preview a {
138 color: #2563eb;
139}
141.preview blockquote {
142 margin: 0.8em 0;
143 padding: 0.1em 1em;
144 border-left: 4px solid #ddd;
145 color: #555;
146}
148.preview code {
149 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
150 font-size: 0.9em;
151 background: #f3f3f3;
152 border-radius: 4px;
153 padding: 0.1em 0.35em;
154}
156.preview pre {
157 background: #f8f8f8;
158 border: 1px solid #eee;
159 border-radius: 6px;
160 padding: 12px 14px;
161 overflow-x: auto;
162 line-height: 1.45;
163}
165.preview pre code {
166 background: none;
167 padding: 0;
168 font-size: 0.87em;
169}
171.code-block {
172 position: relative;
173}
175.code-block .copy-button {
176 position: absolute;
177 top: 6px;
178 right: 6px;
179 font-size: 11px;
180 padding: 2px 8px;
181 border: 1px solid #ddd;
182 border-radius: 4px;
183 background: #fff;
184 color: #666;
185 cursor: pointer;
186 opacity: 0;
187 transition: opacity 0.15s;
188}
190.code-block:hover .copy-button {
191 opacity: 1;
192}
194.code-block .copy-button:hover {
195 background: #f0f0f0;
196}
198.preview table {
199 border-collapse: collapse;
200 margin: 0.8em 0;
201 display: block;
202 overflow-x: auto;
203}
205.preview th,
206.preview td {
207 border: 1px solid #ddd;
208 padding: 5px 12px;
209}
211.preview th {
212 background: #f7f7f7;
213}
215.preview tr:nth-child(2n) {
216 background: #fbfbfb;
217}
219.preview img {
220 max-width: 100%;
221}
223.preview hr {
224 border: none;
225 border-top: 1px solid #ddd;
226 margin: 1.5em 0;
227}
229.preview .katex-display {
230 overflow-x: auto;
231 overflow-y: hidden;
232 padding: 2px 0;
233}
235.preview input[type='checkbox'] {
236 margin-right: 0.45em;
237}
239.mermaid-diagram {
240 margin: 0.8em 0;
241 overflow-x: auto;
242}
244.mermaid-loading {
245 color: #999;
246 font-size: 13px;
247 margin: 0.8em 0;
248}
250.mermaid-error {
251 color: #b91c1c;
252 background: #fef2f2;
253 border: 1px solid #fecaca;
254 white-space: pre-wrap;
255}