@markdstage/markdstage 0.1.1

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 (67) hide show
  1. package/README.md +90 -0
  2. package/bin/markdstage.mjs +12 -0
  3. package/package.json +45 -0
  4. package/shared/README.md +1014 -0
  5. package/shared/THIRD-PARTY-NOTICES.md +19 -0
  6. package/shared/deck-state.mjs +105 -0
  7. package/shared/docs/custom-theme-authoring.md +208 -0
  8. package/shared/markdown-deck.mjs +220 -0
  9. package/shared/markdstage-guide.mjs +276 -0
  10. package/shared/presenter-window.mjs +17 -0
  11. package/shared/renderer/architecture-document.mjs +596 -0
  12. package/shared/renderer/architecture-edit.mjs +298 -0
  13. package/shared/renderer/architecture-editor.mjs +449 -0
  14. package/shared/renderer/architecture.mjs +4033 -0
  15. package/shared/renderer/import-path.mjs +11 -0
  16. package/shared/renderer/index.html +106 -0
  17. package/shared/renderer/renderer.js +2082 -0
  18. package/shared/renderer/slides.css +614 -0
  19. package/shared/renderer/speaker-notes.mjs +106 -0
  20. package/shared/renderer/theme.mjs +205 -0
  21. package/shared/runtime/browser.mjs +539 -0
  22. package/shared/runtime/custom-theme.mjs +135 -0
  23. package/shared/runtime/deck-session.mjs +188 -0
  24. package/shared/runtime/errors.mjs +17 -0
  25. package/shared/runtime/output-paths.mjs +159 -0
  26. package/shared/runtime/output.mjs +385 -0
  27. package/shared/runtime/presentation-server.mjs +505 -0
  28. package/shared/runtime/static-files.mjs +70 -0
  29. package/shared/schema/README.md +228 -0
  30. package/shared/schema/architecture-v1.schema.json +664 -0
  31. package/shared/schema/examples/web-app.architecture.json +119 -0
  32. package/shared/schema/theme-metadata-v1.schema.json +75 -0
  33. package/shared/schema/theme-v1.json +84 -0
  34. package/shared/scripts/architecture-assets.mjs +226 -0
  35. package/shared/scripts/asset-paths.mjs +92 -0
  36. package/shared/scripts/atomic-markdown-replace.mjs +46 -0
  37. package/shared/scripts/markdown-blocks.mjs +182 -0
  38. package/shared/scripts/markdown-files.mjs +63 -0
  39. package/shared/scripts/markdown-save-coordinator.mjs +18 -0
  40. package/shared/scripts/markdown-watcher.mjs +80 -0
  41. package/shared/scripts/theme-paths.mjs +108 -0
  42. package/shared/scripts/vendor-assets.mjs +132 -0
  43. package/shared/scripts/workspace-root.mjs +32 -0
  44. package/shared/vendor/highlight.LICENSE +29 -0
  45. package/shared/vendor/highlight.min.js +1244 -0
  46. package/shared/vendor/marked.min.js +6 -0
  47. package/shared/vendor/mermaid.min.js.part-0001 +268 -0
  48. package/shared/vendor/mermaid.min.js.part-0002 +304 -0
  49. package/shared/vendor/mermaid.min.js.part-0003 +324 -0
  50. package/shared/vendor/mermaid.min.js.part-0004 +374 -0
  51. package/shared/vendor/mermaid.min.js.part-0005 +564 -0
  52. package/shared/vendor/mermaid.min.js.part-0006 +1308 -0
  53. package/shared/vendor/mermaid.min.js.part-0007 +269 -0
  54. package/shared/vendor/purify.min.js +3 -0
  55. package/shared/vendor/vendor-assets.lock.json +60 -0
  56. package/src/cli.mjs +347 -0
  57. package/src/commands/capture.mjs +23 -0
  58. package/src/commands/export.mjs +18 -0
  59. package/src/commands/guide.mjs +23 -0
  60. package/src/commands/inspect.mjs +35 -0
  61. package/src/commands/present.mjs +91 -0
  62. package/src/commands/skill.mjs +114 -0
  63. package/src/commands/validate.mjs +79 -0
  64. package/src/deck.mjs +63 -0
  65. package/src/exit.mjs +58 -0
  66. package/src/runtime.mjs +77 -0
  67. package/src/skills.mjs +155 -0
package/shared/renderer/slides.css ADDED
@@ -0,0 +1,614 @@
1
+ /* ===== Themes =====
2
+ Default (and explicit dark) live on :root; light/microsoft override.
3
+ data-theme is set on <html> and each .deck so print pages can vary themes. */
4
+ :root,
5
+ :root[data-theme="dark"],
6
+ .deck[data-theme="dark"]{
7
+ --bg:#0e1117; --fg:#f0f4fa; --muted:#8b95a3; --body:#c9d2dd;
8
+ --accent:#4ea8ff; --accent-strong:#79c0ff; --accent-soft:rgba(78,168,255,.14); --accent-line:rgba(78,168,255,.4);
9
+ --surface:#161b22; --code:#1b2330; --code-fg:#a9c7ff; --border:#2a313c;
10
+ --syntax-comment:#8b949e; --syntax-keyword:#ff7b72; --syntax-string:#a5d6ff;
11
+ --syntax-number:#79c0ff; --syntax-title:#d2a8ff; --syntax-type:#ffa657;
12
+ --syntax-meta:#7ee787; --syntax-variable:#ffa657;
13
+ --syntax-addition:#7ee787; --syntax-addition-bg:rgba(46,160,67,.15);
14
+ --syntax-deletion:#ffa198; --syntax-deletion-bg:rgba(248,81,73,.15);
15
+ --glow-1:rgba(56,110,190,.22); --glow-2:rgba(120,86,210,.16);
16
+ --topbar:linear-gradient(90deg,#4ea8ff,#7a5cff);
17
+ --kicker-mark:linear-gradient(135deg,#4ea8ff,#7a5cff);
18
+ --cover-bg:
19
+ radial-gradient(1200px 760px at 50% 34%, rgba(78,168,255,.20) 0%, transparent 66%),
20
+ linear-gradient(160deg,#11203a 0%,#0e1117 60%);
21
+ --section-bg:
22
+ linear-gradient(56deg,transparent 0 76%,rgba(225,78,181,.78) 76.4%,
23
+ rgba(122,92,255,.9) 77.2%,rgba(78,168,255,.95) 78%,transparent 78.4%)
24
+ top right/52% 80% no-repeat,
25
+ radial-gradient(120% 58% at 62% 118%,rgba(78,168,255,.92) 0%,
26
+ rgba(122,92,255,.68) 34%,rgba(14,17,23,0) 72%),
27
+ linear-gradient(160deg,#101827 0%,#0e1117 62%);
28
+ --backcover-bg:linear-gradient(135deg,#1d2b52 0%,#2a1f52 100%);
29
+ --print-slide-bg:#0e1117;
30
+ --print-cover-bg:linear-gradient(160deg,#11203a 0%,#0e1117 60%);
31
+ --print-section-bg:var(--section-bg);
32
+ }:root[data-theme="light"],
33
+ .deck[data-theme="light"]{
34
+ --bg:#ffffff; --fg:#15181f; --muted:#5b6470; --body:#333a44;
35
+ --accent:#4f46e5; --accent-strong:#4338ca; --accent-soft:#eef2ff; --accent-line:#c7d2fe;
36
+ --surface:#ffffff; --code:#f3f4f6; --code-fg:#3730a3; --border:#e5e7eb;
37
+ --syntax-comment:#6e7781; --syntax-keyword:#cf222e; --syntax-string:#0a3069;
38
+ --syntax-number:#0550ae; --syntax-title:#8250df; --syntax-type:#953800;
39
+ --syntax-meta:#116329; --syntax-variable:#953800;
40
+ --syntax-addition:#116329; --syntax-addition-bg:#dafbe1;
41
+ --syntax-deletion:#82071e; --syntax-deletion-bg:#ffebe9;
42
+ --glow-1:#eef2ff; --glow-2:#f5f3ff;
43
+ --topbar:linear-gradient(90deg,#4f46e5,#7c3aed);
44
+ --kicker-mark:linear-gradient(135deg,#4f46e5,#7c3aed);
45
+ --cover-bg:
46
+ radial-gradient(1200px 760px at 50% 32%, #e0e7ff 0%, transparent 70%),
47
+ linear-gradient(160deg,#eef2ff 0%,#ffffff 58%);
48
+ --section-bg:
49
+ linear-gradient(56deg,transparent 0 76%,rgba(225,78,181,.72) 76.4%,
50
+ rgba(124,58,237,.88) 77.2%,rgba(59,130,246,.94) 78%,transparent 78.4%)
51
+ top right/52% 80% no-repeat,
52
+ radial-gradient(120% 58% at 62% 118%,rgba(37,99,235,.95) 0%,
53
+ rgba(79,70,229,.84) 31%,rgba(124,58,237,.42) 48%,rgba(255,255,255,0) 72%),
54
+ linear-gradient(160deg,#fff 0%,#f7f7fa 72%);
55
+ --backcover-bg:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
56
+ --print-slide-bg:#ffffff;
57
+ --print-cover-bg:linear-gradient(160deg,#e0e7ff 0%,#eef2ff 45%,#ffffff 100%);
58
+ --print-section-bg:var(--section-bg);
59
+ }
60
+ :root[data-theme="microsoft"],
61
+ .deck[data-theme="microsoft"]{
62
+ --bg:#ffffff; --fg:#201f1e; --muted:#605e5c; --body:#323130;
63
+ --accent:#0078d4; --accent-strong:#106ebe; --accent-soft:#eff6fc; --accent-line:#cfe4f7;
64
+ --surface:#ffffff; --code:#f3f2f1; --code-fg:#0b3a66; --border:#e1dfdd;
65
+ --syntax-comment:#008000; --syntax-keyword:#0000ff; --syntax-string:#a31515;
66
+ --syntax-number:#098658; --syntax-title:#795e26; --syntax-type:#267f99;
67
+ --syntax-meta:#af00db; --syntax-variable:#001080;
68
+ --syntax-addition:#107c10; --syntax-addition-bg:#dff6dd;
69
+ --syntax-deletion:#a4262c; --syntax-deletion-bg:#fde7e9;
70
+ --glow-1:#eaf3fc; --glow-2:#f1f8ff;
71
+ --ms-red:#f25022; --ms-green:#7fba00; --ms-blue:#00a4ef; --ms-yellow:#ffb900;
72
+ --topbar:linear-gradient(90deg,
73
+ #f25022 0 25%, #7fba00 25% 50%, #00a4ef 50% 75%, #ffb900 75% 100%);
74
+ --kicker-mark:linear-gradient(135deg,var(--accent),var(--accent-strong));
75
+ --cover-bg:
76
+ radial-gradient(1100px 720px at 50% 26%, #9fd0f4 0%, transparent 72%),
77
+ linear-gradient(160deg,#bfe1fb 0%,#daeefc 100%);
78
+ --section-bg:
79
+ linear-gradient(56deg,transparent 0 76%,rgba(216,59,154,.74) 76.4%,
80
+ rgba(115,74,200,.88) 77.2%,rgba(0,120,212,.94) 78%,transparent 78.4%)
81
+ top right/52% 80% no-repeat,
82
+ radial-gradient(120% 58% at 62% 118%,rgba(0,120,212,.94) 0%,
83
+ rgba(47,98,205,.82) 31%,rgba(115,74,200,.4) 49%,rgba(255,255,255,0) 72%),
84
+ linear-gradient(160deg,#fff 0%,#f5f5f5 72%);
85
+ --backcover-bg:#0078d4;
86
+ --print-slide-bg:#ffffff;
87
+ --print-cover-bg:linear-gradient(160deg,#a7d4f5 0%,#b7dcf7 55%,#d1e9fa 100%);
88
+ --print-section-bg:var(--section-bg);
89
+ }
90
+ *{box-sizing:border-box}
91
+ /* The canvas viewport itself never scrolls: a slide always fills exactly one
92
+ screen. Sizing the deck with % (not 100vh/100vw, which include the scrollbar
93
+ gutter and round up on fractional display scaling) keeps stray 1px
94
+ scrollbars from appearing on slides that actually fit. */
95
+ html,body{height:100%;margin:0;overflow:hidden}
96
+ #stage{height:100%}
97
+ body.fixed-preview-mode #stage{
98
+ position:fixed;left:50%;top:calc(50% - 24px);width:1280px;height:720px;
99
+ transform:translate(-50%,-50%) scale(var(--fixed-preview-scale,1));
100
+ transform-origin:center;box-shadow:0 18px 60px rgba(0,0,0,.38);
101
+ }
102
+ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
103
+ clip:rect(0,0,0,0);white-space:nowrap;border:0;}
104
+ body{
105
+ font-family:var(--ms-font,"Segoe UI Variable Text","Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif);
106
+ background:
107
+ radial-gradient(1100px 720px at 88% -12%, var(--glow-1) 0%, transparent 60%),
108
+ radial-gradient(900px 620px at -10% 112%, var(--glow-2) 0%, transparent 55%),
109
+ var(--bg);
110
+ color:var(--fg);
111
+ }
112
+ body.markdstage-empty{
113
+ --bg:#0b1020;--fg:#f7f4ed;--muted:#aab2c5;--body:#d7dbe5;
114
+ --accent:#ffb547;--accent-strong:#ffd77a;--accent-soft:rgba(255,181,71,.14);
115
+ --accent-line:rgba(255,181,71,.46);--surface:#151b2f;--border:#303953;
116
+ --glow-1:rgba(255,181,71,.08);--glow-2:rgba(255,215,122,.04);
117
+ }
118
+ .deck{position:relative;height:100%;width:100%;display:flex;flex-direction:column;
119
+ --deck-pad-y:clamp(30px,5.5vh,68px); --deck-pad-x:clamp(40px,6.5vw,104px);
120
+ --slide-h1-size:clamp(32px,6.6vh,72px);
121
+ --slide-h2-size:clamp(25px,5vh,50px);
122
+ --slide-h3-size:clamp(20px,3.4vh,32px);
123
+ --slide-body-size:clamp(18px,3vh,30px);
124
+ --slide-code-size:clamp(14px,2.1vh,22px);
125
+ padding:var(--deck-pad-y) var(--deck-pad-x);
126
+ animation:fade .35s ease both;}
127
+ .deck.size-large{
128
+ --slide-h1-size:clamp(38px,7.4vh,84px);
129
+ --slide-h2-size:clamp(30px,5.8vh,60px);
130
+ --slide-h3-size:clamp(23px,4vh,38px);
131
+ --slide-body-size:clamp(21px,3.45vh,34px);
132
+ --slide-code-size:clamp(16px,2.35vh,24px);}
133
+ .deck.size-xlarge{
134
+ --slide-h1-size:clamp(44px,8.3vh,96px);
135
+ --slide-h2-size:clamp(35px,6.6vh,70px);
136
+ --slide-h3-size:clamp(26px,4.6vh,44px);
137
+ --slide-body-size:clamp(24px,3.9vh,40px);
138
+ --slide-code-size:clamp(18px,2.65vh,28px);}
139
+ .deck::before{content:"";position:fixed;top:0;left:0;right:0;height:6px;z-index:2;
140
+ background:var(--topbar);}
141
+ @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
142
+ @media (prefers-reduced-motion:reduce){.deck{animation:none}}
143
+ .deck>header{flex:0 0 auto;}
144
+ .deck>header:empty{display:none;}
145
+ .kicker{display:inline-flex;align-items:center;gap:.55em;
146
+ color:var(--accent-strong);font-weight:700;letter-spacing:.08em;
147
+ text-transform:uppercase;font-size:clamp(12px,1.6vh,16px);margin-bottom:.55em;}
148
+ .kicker::before{content:"";flex:0 0 auto;width:1.05em;height:1.05em;border-radius:3px;
149
+ background:var(--kicker-mark);}
150
+ .deck[data-theme="microsoft"] .kicker::before{border-radius:0;
151
+ background:
152
+ linear-gradient(var(--ms-red),var(--ms-red)) left top/47% 47% no-repeat,
153
+ linear-gradient(var(--ms-green),var(--ms-green)) right top/47% 47% no-repeat,
154
+ linear-gradient(var(--ms-blue),var(--ms-blue)) left bottom/47% 47% no-repeat,
155
+ linear-gradient(var(--ms-yellow),var(--ms-yellow)) right bottom/47% 47% no-repeat;}
156
+ h1{font-size:var(--slide-h1-size);line-height:1.08;margin:.1em 0 .25em;
157
+ font-weight:700;letter-spacing:-.01em;color:var(--fg);}
158
+ h2{font-size:var(--slide-h2-size);line-height:1.14;margin:.1em 0 .45em;
159
+ font-weight:600;letter-spacing:-.005em;color:var(--fg);}
160
+ h3{font-size:var(--slide-h3-size);margin:.25em 0 .3em;font-weight:600;color:var(--accent-strong);}
161
+ /* Standard slides reserve the header for their leading H1/H2, and the body flows
162
+ from the top right below it (`layout: center` opts back into centering). */
163
+ .deck.has-slide-title>header{display:flex;flex-direction:column;align-items:flex-start;}
164
+ .deck.has-slide-title .slide-title{flex:0 0 auto;width:100%;margin-top:0;}
165
+ .body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;
166
+ font-size:var(--slide-body-size);line-height:1.55;gap:.5em;min-height:0;overflow:hidden;color:var(--body);}
167
+ /* `overflow:auto` would show a scrollbar for a sub-pixel overflow, so scrolling
168
+ is opted into by the renderer only when the content really does not fit
169
+ (see updateBodyScroll / SCROLL_EPSILON in renderer.js). */
170
+ .body.is-scrollable{overflow:auto;}
171
+ .body>:first-child{margin-top:0}
172
+ .body ul,.body ol{margin:.2em 0;padding-left:1.35em;}
173
+ .body li{margin:.4em 0;}
174
+ .body li::marker{color:var(--accent);}
175
+ strong{color:var(--fg);font-weight:700;}
176
+ em{color:var(--accent-strong);font-style:normal;font-weight:600;}
177
+ a{color:var(--accent);text-underline-offset:3px;}
178
+ code{font-family:"Cascadia Code","Cascadia Mono",Consolas,monospace;background:var(--code);
179
+ border:1px solid var(--border);border-radius:5px;padding:.08em .38em;font-size:.9em;color:var(--code-fg);}
180
+ pre{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
181
+ border-radius:8px;padding:1em 1.2em;overflow:auto;font-size:var(--slide-code-size);line-height:1.5;
182
+ box-shadow:0 2px 10px rgba(0,0,0,.06);}
183
+ pre code{background:none;border:0;padding:0;color:inherit;}
184
+ pre code.hljs{display:block;overflow-x:auto;color:var(--code-fg);}
185
+ .hljs-comment,.hljs-quote{color:var(--syntax-comment);font-style:italic;}
186
+ .hljs-doctag,.hljs-keyword,.hljs-selector-tag,.hljs-template-tag{
187
+ color:var(--syntax-keyword);
188
+ }
189
+ .hljs-string,.hljs-regexp,.hljs-template-variable,.hljs-meta .hljs-string{
190
+ color:var(--syntax-string);
191
+ }
192
+ .hljs-attr,.hljs-attribute,.hljs-literal,.hljs-number,.hljs-operator,
193
+ .hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{
194
+ color:var(--syntax-number);
195
+ }
196
+ .hljs-title,.hljs-title.class_,.hljs-title.function_,.hljs-section{
197
+ color:var(--syntax-title);font-weight:600;
198
+ }
199
+ .hljs-built_in,.hljs-name,.hljs-symbol,.hljs-type{
200
+ color:var(--syntax-type);
201
+ }
202
+ .hljs-meta,.hljs-selector-pseudo{color:var(--syntax-meta);}
203
+ .hljs-variable,.hljs-params,.hljs-property{color:var(--syntax-variable);}
204
+ .hljs-subst,.hljs-punctuation{color:var(--code-fg);}
205
+ .hljs-emphasis{font-style:italic;}
206
+ .hljs-strong{font-weight:700;}
207
+ .hljs-addition{color:var(--syntax-addition);background:var(--syntax-addition-bg);}
208
+ .hljs-deletion{color:var(--syntax-deletion);background:var(--syntax-deletion-bg);}
209
+ blockquote{margin:.3em 0;padding:.5em 1.1em;border-left:4px solid var(--accent);
210
+ color:var(--muted);background:var(--accent-soft);border-radius:0 8px 8px 0;}
211
+ table{border-collapse:collapse;width:100%;font-size:.9em;
212
+ box-shadow:0 1px 6px rgba(0,0,0,.05);border-radius:8px;overflow:hidden;}
213
+ th,td{border:1px solid var(--border);padding:.55em .8em;text-align:left;}
214
+ th{background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
215
+ img{max-width:100%;max-height:48vh;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.1);}
216
+ .body img{display:block;margin:.4em auto;}
217
+ pre.mermaid{background:none;border:0;border-left:0;border-radius:0;box-shadow:none;
218
+ padding:0;margin:.4em 0;font-family:inherit;font-size:inherit;line-height:1.3;
219
+ text-align:center;overflow:auto;}
220
+ pre.mermaid svg{max-width:100%;height:auto;max-height:44vh;}
221
+ body.mermaid-loading .mermaid{visibility:hidden;}
222
+ .architecture-diagram{width:100%;min-height:0;margin:.35em 0;display:flex;
223
+ align-items:center;justify-content:center;}
224
+ .architecture-svg{display:block;width:100%;height:auto;max-height:56vh;
225
+ color:var(--body);font-family:inherit;overflow:visible;}
226
+ .architecture-svg text{font-family:inherit;}
227
+ /* --- Architecture diagram editing UI --------------------------------------
228
+ Appears in the DOM only in editing mode (the canvas edit_architecture action /
229
+ ?architectureEdit=1). Normal view, presenter view, and printing do not create
230
+ these elements, so these rules cannot cause visual regressions there. */
231
+ .architecture-editor{position:relative;padding-top:2.4em;}
232
+ .architecture-editor-surface{display:block;}
233
+ .architecture-editor-toolbar{position:absolute;top:0;right:0;left:0;z-index:3;display:flex;
234
+ align-items:center;gap:.65em;font-size:clamp(11px,1.5vh,14px);}
235
+ .architecture-editor-button{border:1px solid var(--border);border-radius:6px;
236
+ padding:.35em .7em;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;}
237
+ .architecture-editor-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-strong);}
238
+ .architecture-editor-button:disabled{opacity:.45;cursor:default;}
239
+ .architecture-editor-button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;}
240
+ .architecture-editor-status{flex:1;color:var(--muted);text-align:right;
241
+ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
242
+ /* Save result. A failure means edits were actually lost, so keep it visually prominent. */
243
+ .architecture-editor-save{flex:0 0 auto;font-weight:600;}
244
+ .architecture-editor-save[data-architecture-save-state="idle"]{display:none;}
245
+ .architecture-editor-save[data-architecture-save-state="saving"]{color:var(--muted);}
246
+ .architecture-editor-save[data-architecture-save-state="saved"]{color:var(--muted);}
247
+ .architecture-editor-save[data-architecture-save-state="failed"]{color:#b3261e;
248
+ border:1px solid currentColor;border-radius:6px;padding:.2em .6em;white-space:normal;}
249
+ .architecture-editor [data-architecture-movable="true"]{cursor:grab;outline:none;}
250
+ .architecture-editor [data-architecture-movable="false"]{cursor:not-allowed;outline:none;}
251
+ .architecture-editor [data-architecture-type]:focus-visible>rect,
252
+ .architecture-editor [data-architecture-type]:focus-visible>ellipse,
253
+ .architecture-editor .architecture-selected>rect,
254
+ .architecture-editor .architecture-selected>ellipse{
255
+ stroke:var(--accent-strong);stroke-width:7;filter:drop-shadow(0 0 8px var(--accent-line));}
256
+ /* Layout-managed elements cannot move. Show a dashed explanation only when selected. */
257
+ .architecture-editor [data-architecture-movable="false"].architecture-selected>rect,
258
+ .architecture-editor [data-architecture-movable="false"].architecture-selected>ellipse{
259
+ stroke-dasharray:10 8;}
260
+ .architecture-error{display:flex;flex-direction:column;gap:.35em;margin:.5em 0;
261
+ padding:.8em 1em;border:2px solid #d13438;border-radius:8px;
262
+ color:var(--body);background:color-mix(in srgb,#d13438 10%,var(--surface));}
263
+ .architecture-error strong{color:#d13438;}
264
+ .architecture-error span{font-family:"Cascadia Code","Cascadia Mono",Consolas,monospace;
265
+ font-size:.75em;overflow-wrap:anywhere;}
266
+ /* Connector routing degraded: a non-fatal notice. The diagram still renders,
267
+ so this is amber (not red) and uses role="status" rather than role="alert". */
268
+ .architecture-routing-warning{display:flex;flex-direction:column;gap:.3em;margin:.4em 0 0;
269
+ padding:.55em .9em;border:1px solid #b26a00;border-radius:8px;
270
+ color:var(--body);background:color-mix(in srgb,#b26a00 12%,var(--surface));
271
+ font-size:.8em;}
272
+ .architecture-routing-warning strong{color:#b26a00;}
273
+ .architecture-routing-warning span{font-family:"Cascadia Code","Cascadia Mono",Consolas,monospace;
274
+ font-size:.85em;overflow-wrap:anywhere;}
275
+ hr{border:0;border-top:1px solid var(--border);margin:.7em 0;}
276
+ footer{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
277
+ color:var(--muted);font-size:clamp(12px,1.7vh,16px);
278
+ margin-top:clamp(12px,2.2vh,26px);border-top:1px solid var(--border);padding-top:12px;}
279
+ footer .page{color:var(--accent-strong);font-weight:600;background:var(--accent-soft);
280
+ border:1px solid var(--accent-line);border-radius:999px;padding:.18em .8em;}
281
+ /* ===== Center layout (`layout: center`) =====
282
+ Standard slides align headings and body content to the top. Only `layout: center`
283
+ vertically centers the heading and body as a unit. As with cover and section
284
+ slides, pin the footer to the bottom so it does not shift the centering baseline. */
285
+ .deck.center-slide{justify-content:center;}
286
+ .deck.center-slide>.body{flex:0 1 auto;justify-content:center;justify-content:safe center;
287
+ max-height:calc(100% - 2*var(--deck-pad-y));}
288
+ .deck.center-slide>footer{position:absolute;
289
+ left:var(--deck-pad-x);right:var(--deck-pad-x);bottom:var(--deck-pad-y);
290
+ margin-top:0;}
291
+
292
+ /* ===== Cover (title) layout =====
293
+ Centers the kicker + body as one block (footer pinned to the bottom via
294
+ absolute positioning so it doesn't shift the centering) with its own
295
+ background so the cover stands apart from the body slides. */
296
+ .deck.title-slide{justify-content:center;text-align:var(--cover-text-align,center);
297
+ background:var(--cover-bg,var(--bg));}
298
+ .deck.title-slide::before{background:var(--cover-topbar,var(--topbar));}
299
+ .deck.title-slide>header{display:flex;justify-content:var(--cover-content-align,center);}
300
+ .deck.title-slide>.body{flex:0 1 auto;justify-content:center;justify-content:safe center;
301
+ align-items:var(--cover-content-align,stretch);
302
+ width:var(--cover-content-width,auto);align-self:var(--cover-content-self,auto);
303
+ max-height:calc(100% - 2*var(--deck-pad-y));z-index:1;}
304
+ .deck.title-slide>footer{position:absolute;
305
+ left:var(--deck-pad-x);right:var(--deck-pad-x);bottom:var(--deck-pad-y);
306
+ margin-top:0;border-top:0;padding-top:0;}
307
+ .deck.title-slide .kicker{margin-bottom:.7em;}
308
+ .deck.markdstage-placeholder{
309
+ --cover-text-align:left;--cover-content-align:flex-start;
310
+ --cover-content-width:min(760px,58%);--cover-content-self:stretch;
311
+ background:
312
+ radial-gradient(ellipse 36% 16% at 78% 82%,rgba(255,215,122,.48),transparent 72%),
313
+ linear-gradient(111deg,transparent 0 61%,rgba(255,215,122,.58) 61.2%,
314
+ rgba(255,181,71,.16) 78%,transparent 78.2%),
315
+ linear-gradient(145deg,#151b2f 0%,#0b1020 62%);
316
+ isolation:isolate;}
317
+ .deck.markdstage-placeholder::before{height:7px;background:#ffb547;}
318
+ .deck.markdstage-placeholder>.body{position:relative;overflow:visible;}
319
+ .deck.markdstage-placeholder>.body::before{
320
+ content:"#";position:absolute;z-index:-1;right:-60%;top:50%;transform:translateY(-50%);
321
+ color:#f7f4ed;font-size:clamp(180px,30vw,420px);font-weight:760;line-height:.8;
322
+ letter-spacing:-.08em;text-shadow:18px 22px 0 rgba(255,181,71,.22);}
323
+ .deck.markdstage-placeholder .kicker{color:#ffd77a;letter-spacing:.14em;}
324
+ .deck.markdstage-placeholder .kicker::before{background:#ffb547;border-radius:2px;}
325
+ .deck.markdstage-placeholder h1{
326
+ max-width:10ch;font-size:clamp(44px,7.8vw,112px);line-height:.94;
327
+ letter-spacing:-.045em;text-wrap:balance;}
328
+ .deck.markdstage-placeholder p{
329
+ max-width:32em;margin-top:1.25em;color:#c8cedd;font-size:clamp(18px,2.2vw,30px);}
330
+ .theme-cover-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;
331
+ max-height:none;object-fit:cover;border-radius:0;box-shadow:none;z-index:0;}
332
+ .theme-cover-logo{position:absolute;top:var(--deck-pad-y);left:var(--deck-pad-x);
333
+ width:var(--cover-logo-width,clamp(130px,16vw,230px));height:auto;max-height:none;
334
+ border-radius:0;box-shadow:none;z-index:2;}
335
+ .deck.title-slide>header,.deck.title-slide>footer{z-index:1;}
336
+
337
+ /* ===== Section divider layout =====
338
+ Keeps the heading block vertically centered and left aligned. The diagonal
339
+ accent and lower color sweep are part of --section-bg, so custom themes can
340
+ replace the background without introducing an icon or image asset path. */
341
+ .deck.section-slide{justify-content:center;text-align:left;
342
+ background:var(--section-bg,var(--cover-bg,var(--bg)));}
343
+ .deck.section-slide::before{display:none;}
344
+ .deck.section-slide>header{flex:0 0 auto;z-index:1;}
345
+ .deck.section-slide>.body{flex:0 1 auto;justify-content:center;justify-content:safe center;
346
+ max-height:calc(100% - 2*var(--deck-pad-y));z-index:1;}
347
+ .deck.section-slide h1,.deck.section-slide h2{font-weight:400;letter-spacing:-.025em;}
348
+ .deck.section-slide>footer{position:absolute;
349
+ left:var(--deck-pad-x);right:var(--deck-pad-x);bottom:var(--deck-pad-y);
350
+ margin-top:0;z-index:1;}
351
+
352
+ /* ===== Back cover =====
353
+ Equivalent to the .thmx "Closing logo slide" and appended to every deck,
354
+ regardless of theme. Uses white text over each theme's dark --backcover-bg.
355
+ Show the logo and copyright notice only when explicitly provided by custom
356
+ theme metadata or slide front matter. */
357
+ .deck.backcover-slide{justify-content:center;text-align:center;
358
+ background:var(--backcover-bg,var(--accent));color:#fff;}
359
+ /* Hide the top bar because it muddies the back cover's solid background. */
360
+ .deck.backcover-slide::before{display:none;}
361
+ .deck.backcover-slide>header{display:flex;justify-content:center;}
362
+ .deck.backcover-slide>.body{flex:0 1 auto;justify-content:center;justify-content:safe center;
363
+ color:#fff;max-height:calc(100% - 2*var(--deck-pad-y));}
364
+ .deck.backcover-slide h1,.deck.backcover-slide h2,
365
+ .deck.backcover-slide h3,.deck.backcover-slide strong{color:#fff;}
366
+ .deck.backcover-slide em{color:rgba(255,255,255,.82);}
367
+ .deck.backcover-slide .kicker{color:#fff;margin-bottom:.7em;}
368
+ .deck.backcover-slide a{color:#fff;}
369
+ .deck.backcover-slide li::marker{color:rgba(255,255,255,.7);}
370
+ .theme-backcover-logo{position:absolute;top:var(--deck-pad-y);left:var(--deck-pad-x);
371
+ width:var(--backcover-logo-width,clamp(130px,16vw,230px));height:auto;max-height:none;
372
+ border-radius:0;box-shadow:none;}
373
+ .theme-backcover-logo-text{width:auto;display:flex;align-items:center;
374
+ font-size:clamp(17px,2.6vh,26px);font-weight:600;letter-spacing:.01em;color:#fff;}
375
+ .theme-backcover-copyright{position:absolute;left:var(--deck-pad-x);right:var(--deck-pad-x);
376
+ bottom:var(--deck-pad-y);text-align:left;
377
+ font-size:clamp(10px,1.35vh,13px);color:rgba(255,255,255,.78);}
378
+
379
+ /* ===== In-canvas navigation controls ===== */
380
+ /* An author `display` rule on .nav/.overview would override the UA's
381
+ [hidden]{display:none}, so re-assert hidden explicitly. */
382
+ .nav[hidden],.overview[hidden]{display:none;}
383
+ .nav{position:fixed;left:50%;bottom:clamp(10px,2.4vh,22px);transform:translateX(-50%);
384
+ z-index:50;display:flex;align-items:center;gap:.4em;
385
+ padding:.3em .5em;border-radius:999px;
386
+ background:color-mix(in srgb,var(--surface) 86%,transparent);
387
+ border:1px solid var(--border);
388
+ box-shadow:0 6px 22px rgba(0,0,0,.22);
389
+ opacity:.45;transition:opacity .2s ease;}
390
+ .nav:hover,.nav:focus-within{opacity:1;}
391
+ @media (prefers-reduced-motion:reduce){.nav{transition:none;}}
392
+ .nav-btn{display:inline-flex;align-items:center;justify-content:center;
393
+ min-width:2em;height:2em;padding:0 .55em;
394
+ font-size:clamp(13px,1.9vh,17px);line-height:1;cursor:pointer;
395
+ color:var(--fg);background:transparent;border:1px solid transparent;
396
+ border-radius:999px;transition:background .15s ease,color .15s ease;}
397
+ .nav-btn[hidden]{display:none;}
398
+ .nav-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-strong);}
399
+ .nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
400
+ .nav-btn:disabled{opacity:.32;cursor:default;}
401
+ .nav-btn[data-state="active"]{color:var(--accent-strong);background:var(--accent-soft);}
402
+ .nav-btn[data-state="error"]{color:#d13438;}
403
+ .nav-fixed-preview{min-width:3.25em;font-size:clamp(11px,1.55vh,14px);font-weight:700;}
404
+ .nav-counter{min-width:4.2em;text-align:center;font-variant-numeric:tabular-nums;
405
+ font-weight:600;color:var(--accent-strong);font-size:clamp(12px,1.7vh,16px);
406
+ padding:0 .3em;user-select:none;}
407
+ .layout-warning{position:fixed;top:14px;right:14px;z-index:55;
408
+ max-width:min(420px,calc(100vw - 28px));padding:.55em .8em;border-radius:8px;
409
+ color:#fff;background:#a4262c;border:1px solid #f1aeb5;
410
+ box-shadow:0 6px 22px rgba(0,0,0,.25);font-size:14px;font-weight:650;}
411
+ .layout-warning[hidden]{display:none;}
412
+ body.presenter-mode .nav{opacity:0;}
413
+ body.presenter-mode .nav:hover,body.presenter-mode .nav:focus-within{opacity:1;}
414
+ body.presenter-mode #navPresent{display:none;}
415
+ body.presenter-mode #navPresenterView{display:none;}
416
+ body.presenter-mode #navExport{display:none;}
417
+ body.presenter-mode #navImport{display:none;}
418
+ body.presenter-mode #navSourceMode{display:none;}
419
+ body.preview-mode .nav,body.preview-mode .overview{display:none!important;}
420
+ /* When no deck is loaded, leave only the load button as the available action. */
421
+ .nav.nav-empty > :not(#navImport){display:none;}
422
+ body.markdstage-empty .nav{
423
+ opacity:1;padding:.42em;border-color:#3b4562;background:#151b2f;
424
+ box-shadow:0 10px 30px rgba(0,0,0,.36);}
425
+ body.markdstage-empty #navImport{
426
+ width:auto;min-width:2.5em;height:2.5em;padding:0 1em;
427
+ border-color:#ffb547;background:#ffb547;color:#0b1020;font-weight:750;}
428
+ body.markdstage-empty #navImport::after{content:" Open Markdown";}
429
+ body.markdstage-empty #navImport:hover{background:#ffd77a;color:#0b1020;}
430
+
431
+ /* ===== Presenter view ===== */
432
+ .presenter-view[hidden]{display:none;}
433
+ .presenter-view{position:fixed;inset:0;z-index:55;display:grid;
434
+ grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,2vh,22px);
435
+ padding:clamp(16px,3vh,30px) clamp(18px,3vw,42px);
436
+ background:var(--bg);color:var(--fg);}
437
+ .presenter-view-head{display:flex;align-items:center;justify-content:space-between;gap:1em;}
438
+ .presenter-view-head h1{margin:0;font-size:clamp(24px,4vh,42px);}
439
+ .presenter-previews{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
440
+ align-items:stretch;gap:clamp(16px,2vw,30px);min-height:0;}
441
+ .presenter-preview{display:flex;min-width:0;min-height:0;flex-direction:column;gap:.55em;}
442
+ .presenter-preview h2{margin:0;font-size:clamp(16px,2.4vh,24px);color:var(--accent-strong);}
443
+ .presenter-preview-current{justify-content:center;}
444
+ .presenter-frame,.presenter-next-empty{width:100%;aspect-ratio:16/9;border:1px solid var(--border);
445
+ border-radius:10px;background:var(--surface);box-shadow:0 6px 24px rgba(0,0,0,.24);}
446
+ .presenter-frame{display:block;}
447
+ .presenter-frame[hidden]{display:none;}
448
+ .presenter-next-empty{display:flex;align-items:center;justify-content:center;margin:0;
449
+ color:var(--muted);font-weight:600;}
450
+ .presenter-next-empty[hidden]{display:none;}
451
+ .presenter-sidebar{display:grid;grid-template-rows:auto minmax(0,1fr);
452
+ gap:clamp(12px,2vh,20px);min-width:0;min-height:0;}
453
+ .presenter-notes{display:flex;min-width:0;min-height:0;flex-direction:column;gap:.55em;}
454
+ .presenter-notes h2{margin:0;font-size:clamp(16px,2.4vh,24px);color:var(--accent-strong);}
455
+ .presenter-notes-body,.presenter-notes-empty{flex:1 1 auto;min-height:0;margin:0;padding:.85em 1em;
456
+ overflow:auto;border:1px solid var(--border);border-radius:10px;
457
+ background:var(--surface);color:var(--body);font-size:clamp(14px,1.9vh,18px);line-height:1.55;}
458
+ .presenter-notes-body[hidden],.presenter-notes-empty[hidden]{display:none;}
459
+ .presenter-notes-body>:first-child{margin-top:0;}
460
+ .presenter-notes-body>:last-child{margin-bottom:0;}
461
+ .presenter-notes-body h1,.presenter-notes-body h2,.presenter-notes-body h3{
462
+ margin:.45em 0 .3em;font-size:1.15em;color:var(--fg);}
463
+ .presenter-notes-body ul,.presenter-notes-body ol{padding-left:1.35em;}
464
+ .presenter-notes-body pre{font-size:.78em;}
465
+ .presenter-notes-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);}
466
+ .presenter-controls{display:flex;align-items:center;justify-content:center;gap:.75em;flex-wrap:wrap;}
467
+ .presenter-button{min-height:2.5em;padding:.45em 1em;border:1px solid var(--border);
468
+ border-radius:7px;background:var(--surface);color:var(--fg);font:inherit;font-weight:600;
469
+ cursor:pointer;}
470
+ .presenter-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-strong);
471
+ background:var(--accent-soft);}
472
+ .presenter-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
473
+ .presenter-button:disabled{opacity:.4;cursor:default;}
474
+ .presenter-toggle{background:var(--accent);border-color:var(--accent);color:#fff;}
475
+ .presenter-toggle[data-state="active"]{background:#d13438;border-color:#d13438;color:#fff;}
476
+ .presenter-counter{min-width:5em;text-align:center;font-weight:700;
477
+ font-variant-numeric:tabular-nums;color:var(--accent-strong);}
478
+ body.presenter-view-mode #stage,body.presenter-view-mode #nav,
479
+ body.presenter-view-mode .layout-warning{display:none;}
480
+ @media (max-width:800px){
481
+ .presenter-view{overflow:auto;}
482
+ .presenter-previews{grid-template-columns:1fr;align-items:start;}
483
+ .presenter-preview-current{order:-1;}
484
+ .presenter-sidebar{min-height:30em;}
485
+ }
486
+
487
+ /* ===== Slide-list overview overlay ===== */
488
+ .overview{position:fixed;inset:0;z-index:60;display:flex;
489
+ align-items:center;justify-content:center;
490
+ background:rgba(0,0,0,.46);backdrop-filter:blur(2px);}
491
+ .overview-panel{width:min(560px,86vw);max-height:80vh;display:flex;flex-direction:column;
492
+ background:var(--surface);color:var(--fg);
493
+ border:1px solid var(--border);border-radius:14px;overflow:hidden;
494
+ box-shadow:0 18px 60px rgba(0,0,0,.4);
495
+ animation:fade .2s ease both;}
496
+ .overview-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
497
+ padding:.7em 1em;border-bottom:1px solid var(--border);
498
+ font-weight:700;letter-spacing:.04em;color:var(--accent-strong);
499
+ background:var(--accent-soft);}
500
+ .overview-list{flex:1 1 auto;margin:0;padding:.5em;list-style:none;overflow:auto;}
501
+ .overview-item{margin:0;}
502
+ .overview-link{display:flex;align-items:center;gap:.7em;width:100%;
503
+ padding:.55em .7em;border:0;border-radius:8px;cursor:pointer;text-align:left;
504
+ background:transparent;color:var(--body);font:inherit;
505
+ transition:background .12s ease,color .12s ease;}
506
+ .overview-link:hover{background:var(--accent-soft);color:var(--fg);}
507
+ .overview-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
508
+ .overview-num{flex:0 0 auto;min-width:1.9em;height:1.9em;display:inline-flex;
509
+ align-items:center;justify-content:center;border-radius:6px;
510
+ font-size:.82em;font-weight:700;font-variant-numeric:tabular-nums;
511
+ color:var(--muted);background:var(--code);border:1px solid var(--border);}
512
+ .overview-label{flex:1 1 auto;font-size:.96em;line-height:1.35;
513
+ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
514
+ .overview-item.current .overview-link{background:var(--accent-soft);}
515
+ .overview-item.current .overview-num{color:var(--fg);background:var(--accent);
516
+ border-color:var(--accent);}
517
+ .overview-item.current .overview-label{color:var(--fg);font-weight:600;}
518
+
519
+ /* ===== Markdown import overlay ===== */
520
+ .import-mode{display:flex;align-items:center;gap:1em;margin:.8em 1em 0;padding:.7em;
521
+ color:var(--body);background:var(--code);border:1px solid var(--border);border-radius:8px;}
522
+ .import-mode legend{padding:0 .3em;font-size:.82em;font-weight:700;color:var(--muted);}
523
+ .import-mode label{display:inline-flex;align-items:center;gap:.35em;font-size:.9em;cursor:pointer;}
524
+ .import-mode input{accent-color:var(--accent);}
525
+ .import-mode input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
526
+ .import-filter{flex:0 0 auto;margin:.7em 1em 0;padding:.5em .7em;
527
+ font:inherit;font-size:.95em;color:var(--fg);
528
+ background:var(--code);border:1px solid var(--border);border-radius:8px;}
529
+ .import-filter:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;}
530
+ .import-message{flex:0 0 auto;margin:.6em 1em 0;font-size:.86em;color:var(--muted);}
531
+ .import-message:empty{display:none;}
532
+ .import-message[data-state="error"]{color:#d13438;}
533
+ .import-file{align-items:stretch;flex-direction:column;gap:.12em;}
534
+ .import-filename{min-width:0;font-size:.94em;font-weight:600;line-height:1.35;
535
+ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
536
+ .import-parent{min-width:0;font-size:.78em;line-height:1.3;color:var(--muted);
537
+ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
538
+
539
+ /* ===== Fixed 16:9 output surface ===== */
540
+ /* PDF, PNG capture, and the in-canvas fixed preview share these rules. At the
541
+ CSS reference pixel density, 1280x720 equals the PDF's 13.333333in x 7.5in. */
542
+ body.fixed-output-mode .deck{
543
+ width:1280px;height:720px;min-width:1280px;max-width:1280px;
544
+ min-height:720px;max-height:720px;
545
+ --deck-pad-y:40px;--deck-pad-x:84px;
546
+ --slide-h1-size:48px;--slide-h2-size:36px;--slide-h3-size:24px;
547
+ --slide-body-size:22px;--slide-code-size:15px;
548
+ overflow:hidden;animation:none;
549
+ }
550
+ body.fixed-output-mode .deck.size-large{
551
+ --slide-h1-size:53px;--slide-h2-size:42px;--slide-h3-size:29px;
552
+ --slide-body-size:25px;--slide-code-size:17px;
553
+ }
554
+ body.fixed-output-mode .deck.size-xlarge{
555
+ --slide-h1-size:60px;--slide-h2-size:48px;--slide-h3-size:33px;
556
+ --slide-body-size:28px;--slide-code-size:19px;
557
+ }
558
+ body.fixed-output-mode .deck:not(.title-slide):not(.section-slide):not(.backcover-slide){
559
+ background:var(--print-slide-bg,var(--bg));
560
+ }
561
+ body.fixed-output-mode .deck.title-slide{background:var(--print-cover-bg,var(--cover-bg));}
562
+ body.fixed-output-mode .deck.section-slide{
563
+ background:var(--print-section-bg,var(--section-bg,var(--bg)));
564
+ }
565
+ body.fixed-output-mode .deck.backcover-slide{background:var(--backcover-bg,var(--accent));}
566
+ body.fixed-output-mode .deck::before{position:absolute;}
567
+ body.fixed-output-mode .body{overflow:hidden;}
568
+ body.fixed-output-mode .kicker{font-size:12px;}
569
+ body.fixed-output-mode img{max-height:346px;}
570
+ body.fixed-output-mode pre.mermaid svg{max-height:317px;}
571
+ body.fixed-output-mode .architecture-svg{max-height:504px;}
572
+ body.fixed-output-mode footer{gap:.65em;font-size:11px;margin-top:16px;}
573
+ body.fixed-output-mode .theme-cover-logo,
574
+ body.fixed-output-mode .theme-backcover-logo{width:var(--cover-logo-width,205px);}
575
+ body.fixed-output-mode .theme-backcover-logo{width:var(--backcover-logo-width,205px);}
576
+ body.fixed-output-mode .theme-backcover-logo-text{width:auto;font-size:19px;}
577
+ body.fixed-output-mode .theme-backcover-copyright{font-size:10px;}
578
+ body.fixed-output-mode .architecture-editor-toolbar{display:none!important;}
579
+
580
+ body.capture-mode{width:1280px;height:720px;background:none;}
581
+ body.capture-mode #stage{display:block;width:1280px;height:720px;}
582
+ body.capture-mode .nav,body.capture-mode .overview,body.capture-mode .layout-warning{
583
+ display:none!important;
584
+ }
585
+
586
+ /* ===== Headless PDF export ===== */
587
+ @page{size:13.333333in 7.5in;margin:0;}
588
+ @media print{
589
+ /* The screen rules clip everything to one viewport; printing needs the whole
590
+ stack of pages to flow, so the scroll containment is lifted here. */
591
+ html,body{width:1280px;height:auto;overflow:visible;}
592
+ body.print-mode{
593
+ overflow:visible;background:none;
594
+ -webkit-print-color-adjust:exact;print-color-adjust:exact;
595
+ }
596
+
597
+ body.print-mode #stage{display:block;width:1280px;height:auto;}
598
+ body.print-mode .deck{
599
+ break-after:page;page-break-after:always;
600
+ }
601
+ body.print-mode .deck:last-child{break-after:auto;page-break-after:auto;}
602
+ /* Mermaid appends a tooltip host to <body> on render. It sits just past the
603
+ 720px page boundary and forces an extra blank page in the exported PDF. */
604
+ body.print-mode .mermaidTooltip{display:none!important;}
605
+ body.print-mode .nav,body.print-mode .overview{display:none!important;}
606
+ }
607
+
608
+ @media (forced-colors:active){
609
+ body{background:Canvas;color:CanvasText;}
610
+ .deck{background:Canvas!important;color:CanvasText;border:1px solid CanvasText;}
611
+ .deck::before{background:Highlight;}
612
+ .deck a{color:LinkText;}
613
+ .deck pre,.deck code,.deck table,.deck th,.deck td{border-color:CanvasText;}
614
+ }