-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
447 lines (445 loc) · 131 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJtMzIgOTAgNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDAgMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwIDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNODcuOCA0Ny41Qzg5IDUwIDg3LjcgNTIgODUgNTJIMzVhOC43IDguNyAwIDAgMS03LjItNC41bC0xNS42LTMxQzExIDE0IDEyLjIgMTIgMTUgMTJoNTBhOC44IDguOCAwIDAgMSA3LjIgNC41ek02MCA1MnYzNm0tMTAgMGgyME00NSA0MmgyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iNSIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-bigger{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTIgNTBoODBNNTIgOTBWMTAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjUiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-smaller{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTIgNTBoODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjUiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{content-visibility:hidden;opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{content-visibility:visible;opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide.bespoke-marp-active.bespoke-marp-active-ready *{-webkit-animation-name:__bespoke_marp__!important;animation-name:__bespoke_marp__!important}@supports not (content-visibility:hidden){svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}}[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;contain:paint;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;will-change:transform;z-index:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{background:#0288d1;flex:0 0 0;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{display:grid;font-family:Helvetica,Arial,sans-serif;grid-template:"current dragbar next" minmax(140px,1fr) "current dragbar note" 2fr "info dragbar note" 3em;grid-template-columns:minmax(3px,var(--bespoke-marp-presenter-split-ratio,66%)) 0 minmax(3px,1fr);height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container{background:#0288d1;cursor:col-resize;grid-area:dragbar;margin-left:-3px;opacity:0;position:relative;transition:opacity .4s linear .1s;width:6px;z-index:10}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container:hover{opacity:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container.active{opacity:1;transition-delay:0s}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#eee;grid-area:note;position:relative;z-index:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper{bottom:0;display:block;left:0;position:absolute;right:0;top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons{background:rgba(0,0,0,.65);border-radius:4px;bottom:0;display:flex;gap:4px;margin:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;right:0;transition:opacity .2s linear}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons:focus-within,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper:focus-within+.bespoke-marp-presenter-note-buttons,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container:hover .bespoke-marp-presenter-note-buttons{opacity:1;pointer-events:auto}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{word-wrap:break-word;box-sizing:border-box;font-size:calc(1.1em*var(--bespoke-marp-note-font-scale, 1));height:calc(100% - 40px);margin:20px;overflow:auto;padding-right:3px;scrollbar-color:hsla(0,0%,93%,.5) transparent;scrollbar-width:thin;white-space:pre-wrap;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,93%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#eee;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;overflow:hidden;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{box-sizing:border-box;display:block;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer:hover{cursor:pointer}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>div#p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#p>svg>foreignObject>section h1{font-size:2em;margin:0.67em 0}div#p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#p>svg>foreignObject>section{page-break-before:always;break-before:page}div#p>svg>foreignObject>section,div#p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;animation-delay:0s!important;animation-duration:0s!important;color-adjust:exact!important;transition:none!important}div#p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{position:static}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{position:relative}}div#p>svg>foreignObject>section [data-marp-fitting-svg-content]{display:table;white-space:nowrap;width:-webkit-max-content;width:-moz-max-content;width:max-content}div#p>svg>foreignObject>section [data-marp-fitting-svg-content-wrap]{white-space:pre}div#p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp default theme.
*
* @theme default
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#p>svg>foreignObject>section{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;background-color:#fff;color:#24292f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.5;margin:0}div#p>svg>foreignObject>section{--marpit-root-font-size:16px}div#p>svg>foreignObject>section h1:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h2:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h3:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h4:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h5:hover .anchor .octicon-link:before,div#p>svg>foreignObject>section h6:hover .anchor .octicon-link:before{background-color:currentColor;content:" ";display:inline-block;height:16px;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');width:16px}div#p>svg>foreignObject>section details,div#p>svg>foreignObject>section figcaption,div#p>svg>foreignObject>section figure{display:block}div#p>svg>foreignObject>section summary{display:list-item}div#p>svg>foreignObject>section [hidden]{display:none!important}div#p>svg>foreignObject>section a{background-color:transparent;color:#0969da;text-decoration:none}div#p>svg>foreignObject>section a:active,div#p>svg>foreignObject>section a:hover{outline-width:0}div#p>svg>foreignObject>section abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}div#p>svg>foreignObject>section b,div#p>svg>foreignObject>section strong{font-weight:600}div#p>svg>foreignObject>section dfn{font-style:italic}div#p>svg>foreignObject>section h1{border-bottom:1px solid #d8dee4;font-size:2em;font-weight:600;margin:.67em 0;padding-bottom:.3em}div#p>svg>foreignObject>section mark{background-color:#fff8c5;color:#24292f}div#p>svg>foreignObject>section small{font-size:90%}div#p>svg>foreignObject>section sub,div#p>svg>foreignObject>section sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}div#p>svg>foreignObject>section sub{bottom:-.25em}div#p>svg>foreignObject>section sup{top:-.5em}div#p>svg>foreignObject>section img{background-color:#fff;border-style:none;box-sizing:content-box;max-width:100%}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section kbd,div#p>svg>foreignObject>section pre,div#p>svg>foreignObject>section samp{font-family:monospace,monospace;font-size:1em}div#p>svg>foreignObject>section figure{margin:1em 40px}div#p>svg>foreignObject>section hr{background:transparent;background-color:#d0d7de;border:0;box-sizing:content-box;height:.25em;margin:24px 0;overflow:hidden;padding:0}div#p>svg>foreignObject>section input{font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible}div#p>svg>foreignObject>section [type=button],div#p>svg>foreignObject>section [type=reset],div#p>svg>foreignObject>section [type=submit]{-webkit-appearance:button}div#p>svg>foreignObject>section [type=button]::-moz-focus-inner,div#p>svg>foreignObject>section [type=reset]::-moz-focus-inner,div#p>svg>foreignObject>section [type=submit]::-moz-focus-inner{border-style:none;padding:0}div#p>svg>foreignObject>section [type=button]:-moz-focusring,div#p>svg>foreignObject>section [type=reset]:-moz-focusring,div#p>svg>foreignObject>section [type=submit]:-moz-focusring{outline:1px dotted ButtonText}div#p>svg>foreignObject>section [type=checkbox],div#p>svg>foreignObject>section [type=radio]{box-sizing:border-box;padding:0}div#p>svg>foreignObject>section [type=number]::-webkit-inner-spin-button,div#p>svg>foreignObject>section [type=number]::-webkit-outer-spin-button{height:auto}div#p>svg>foreignObject>section [type=search]{-webkit-appearance:textfield;outline-offset:-2px}div#p>svg>foreignObject>section [type=search]::-webkit-search-cancel-button,div#p>svg>foreignObject>section [type=search]::-webkit-search-decoration{-webkit-appearance:none}div#p>svg>foreignObject>section ::-webkit-input-placeholder{color:inherit;opacity:.54}div#p>svg>foreignObject>section ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}div#p>svg>foreignObject>section a:hover{text-decoration:underline}div#p>svg>foreignObject>section hr:after,div#p>svg>foreignObject>section hr:before{content:"";display:table}div#p>svg>foreignObject>section hr:after{clear:both}div#p>svg>foreignObject>section table{border-collapse:collapse;border-spacing:0;display:block;max-width:100%;overflow:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content}div#p>svg>foreignObject>section td,div#p>svg>foreignObject>section th{padding:0}div#p>svg>foreignObject>section details summary{cursor:pointer}div#p>svg>foreignObject>section details:not([open])>:not(summary){display:none!important}div#p>svg>foreignObject>section kbd{background-color:#f6f8fa;border:1px solid rgba(175,184,193,.2);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(175,184,193,.2);color:#24292f;display:inline-block;font:11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;line-height:10px;padding:3px 5px;vertical-align:middle}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:24px}div#p>svg>foreignObject>section h2{border-bottom:1px solid #d8dee4;font-size:1.5em;font-weight:600;padding-bottom:.3em}div#p>svg>foreignObject>section h3{font-size:1.25em;font-weight:600}div#p>svg>foreignObject>section h4{font-size:1em;font-weight:600}div#p>svg>foreignObject>section h5{font-size:.875em;font-weight:600}div#p>svg>foreignObject>section h6{color:#57606a;font-size:.85em;font-weight:600}div#p>svg>foreignObject>section p{margin-bottom:10px;margin-top:0}div#p>svg>foreignObject>section blockquote{border-left:.25em solid #d0d7de;color:#57606a;margin:0;padding:0 1em}div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section ul{margin-bottom:0;margin-top:0;padding-left:2em}div#p>svg>foreignObject>section ol ol,div#p>svg>foreignObject>section ul ol{list-style-type:lower-roman}div#p>svg>foreignObject>section ol ol ol,div#p>svg>foreignObject>section ol ul ol,div#p>svg>foreignObject>section ul ol ol,div#p>svg>foreignObject>section ul ul ol{list-style-type:lower-alpha}div#p>svg>foreignObject>section dd{margin-left:0}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section pre,div#p>svg>foreignObject>section tt{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:12px}div#p>svg>foreignObject>section pre{word-wrap:normal;margin-bottom:0;margin-top:0}div#p>svg>foreignObject>section .octicon{fill:currentColor;display:inline-block;overflow:visible!important;vertical-align:text-bottom}div#p>svg>foreignObject>section ::-moz-placeholder{color:#6e7781;opacity:1}div#p>svg>foreignObject>section :-ms-input-placeholder{color:#6e7781;opacity:1}div#p>svg>foreignObject>section ::placeholder{color:#6e7781;opacity:1}div#p>svg>foreignObject>section input::-webkit-inner-spin-button,div#p>svg>foreignObject>section input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}div#p>svg>foreignObject>section .pl-c{color:#6e7781}div#p>svg>foreignObject>section .pl-c1,div#p>svg>foreignObject>section .pl-s .pl-v{color:#0550ae}div#p>svg>foreignObject>section .pl-e,div#p>svg>foreignObject>section .pl-en{color:#8250df}div#p>svg>foreignObject>section .pl-s .pl-s1,div#p>svg>foreignObject>section .pl-smi{color:#24292f}div#p>svg>foreignObject>section .pl-ent{color:#116329}div#p>svg>foreignObject>section .pl-k{color:#cf222e}div#p>svg>foreignObject>section .pl-pds,div#p>svg>foreignObject>section .pl-s,div#p>svg>foreignObject>section .pl-s .pl-pse .pl-s1,div#p>svg>foreignObject>section .pl-sr,div#p>svg>foreignObject>section .pl-sr .pl-cce,div#p>svg>foreignObject>section .pl-sr .pl-sra,div#p>svg>foreignObject>section .pl-sr .pl-sre{color:#0a3069}div#p>svg>foreignObject>section .pl-smw,div#p>svg>foreignObject>section .pl-v{color:#953800}div#p>svg>foreignObject>section .pl-bu{color:#82071e}div#p>svg>foreignObject>section .pl-ii{background-color:#82071e;color:#f6f8fa}div#p>svg>foreignObject>section .pl-c2{background-color:#cf222e;color:#f6f8fa}div#p>svg>foreignObject>section .pl-sr .pl-cce{color:#116329;font-weight:700}div#p>svg>foreignObject>section .pl-ml{color:#3b2300}div#p>svg>foreignObject>section .pl-mh,div#p>svg>foreignObject>section .pl-mh .pl-en,div#p>svg>foreignObject>section .pl-ms{color:#0550ae;font-weight:700}div#p>svg>foreignObject>section .pl-mi{color:#24292f;font-style:italic}div#p>svg>foreignObject>section .pl-mb{color:#24292f;font-weight:700}div#p>svg>foreignObject>section .pl-md{background-color:#ffebe9;color:#82071e}div#p>svg>foreignObject>section .pl-mi1{background-color:#dafbe1;color:#116329}div#p>svg>foreignObject>section .pl-mc{background-color:#ffd8b5;color:#953800}div#p>svg>foreignObject>section .pl-mi2{background-color:#0550ae;color:#eaeef2}div#p>svg>foreignObject>section .pl-mdr{color:#8250df;font-weight:700}div#p>svg>foreignObject>section .pl-ba{color:#57606a}div#p>svg>foreignObject>section .pl-sg{color:#8c959f}div#p>svg>foreignObject>section .pl-corl{color:#0a3069;text-decoration:underline}div#p>svg>foreignObject>section [data-catalyst]{display:block}div#p>svg>foreignObject>section g-emoji{font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:400;line-height:1;vertical-align:-.075em}div#p>svg>foreignObject>section g-emoji img{height:1em;width:1em}div#p>svg>foreignObject>section:after,div#p>svg>foreignObject>section:before{
/* content:""; */display:table}div#p>svg>foreignObject>section:after{clear:both}div#p>svg>foreignObject>section>:first-child{margin-top:0!important}div#p>svg>foreignObject>section>:last-child{margin-bottom:0!important}div#p>svg>foreignObject>section a:not([href]){color:inherit;text-decoration:none}div#p>svg>foreignObject>section .absent{color:#cf222e}div#p>svg>foreignObject>section .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}div#p>svg>foreignObject>section .anchor:focus{outline:none}div#p>svg>foreignObject>section blockquote,div#p>svg>foreignObject>section details,div#p>svg>foreignObject>section dl,div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section p,div#p>svg>foreignObject>section pre,div#p>svg>foreignObject>section table,div#p>svg>foreignObject>section ul{margin-bottom:16px;margin-top:0}div#p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#p>svg>foreignObject>section sup>a:before{content:"["}div#p>svg>foreignObject>section sup>a:after{content:"]"}div#p>svg>foreignObject>section h1 .octicon-link,div#p>svg>foreignObject>section h2 .octicon-link,div#p>svg>foreignObject>section h3 .octicon-link,div#p>svg>foreignObject>section h4 .octicon-link,div#p>svg>foreignObject>section h5 .octicon-link,div#p>svg>foreignObject>section h6 .octicon-link{color:#24292f;vertical-align:middle;visibility:hidden}div#p>svg>foreignObject>section h1:hover .anchor,div#p>svg>foreignObject>section h2:hover .anchor,div#p>svg>foreignObject>section h3:hover .anchor,div#p>svg>foreignObject>section h4:hover .anchor,div#p>svg>foreignObject>section h5:hover .anchor,div#p>svg>foreignObject>section h6:hover .anchor{text-decoration:none}div#p>svg>foreignObject>section h1:hover .anchor .octicon-link,div#p>svg>foreignObject>section h2:hover .anchor .octicon-link,div#p>svg>foreignObject>section h3:hover .anchor .octicon-link,div#p>svg>foreignObject>section h4:hover .anchor .octicon-link,div#p>svg>foreignObject>section h5:hover .anchor .octicon-link,div#p>svg>foreignObject>section h6:hover .anchor .octicon-link{visibility:visible}div#p>svg>foreignObject>section h1 code,div#p>svg>foreignObject>section h1 tt,div#p>svg>foreignObject>section h2 code,div#p>svg>foreignObject>section h2 tt,div#p>svg>foreignObject>section h3 code,div#p>svg>foreignObject>section h3 tt,div#p>svg>foreignObject>section h4 code,div#p>svg>foreignObject>section h4 tt,div#p>svg>foreignObject>section h5 code,div#p>svg>foreignObject>section h5 tt,div#p>svg>foreignObject>section h6 code,div#p>svg>foreignObject>section h6 tt{font-size:inherit;padding:0 .2em}div#p>svg>foreignObject>section ol.no-list,div#p>svg>foreignObject>section ul.no-list{list-style-type:none;padding:0}div#p>svg>foreignObject>section ol[type="1"]{list-style-type:decimal}div#p>svg>foreignObject>section ol[type=a]{list-style-type:lower-alpha}div#p>svg>foreignObject>section ol[type=i]{list-style-type:lower-roman}div#p>svg>foreignObject>section div>ol:not([type]){list-style-type:decimal}div#p>svg>foreignObject>section ol ol,div#p>svg>foreignObject>section ol ul,div#p>svg>foreignObject>section ul ol,div#p>svg>foreignObject>section ul ul{margin-bottom:0;margin-top:0}div#p>svg>foreignObject>section li>p{margin-top:16px}div#p>svg>foreignObject>section li+li{margin-top:.25em}div#p>svg>foreignObject>section dl{padding:0}div#p>svg>foreignObject>section dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:16px;padding:0}div#p>svg>foreignObject>section dl dd{margin-bottom:16px;padding:0 16px}div#p>svg>foreignObject>section table th{font-weight:600}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{border:1px solid #d0d7de;padding:6px 13px}div#p>svg>foreignObject>section table tr{background-color:#fff;border-top:1px solid #d8dee4}div#p>svg>foreignObject>section table tr:nth-child(2n){background-color:#f6f8fa}div#p>svg>foreignObject>section table img{background-color:transparent}div#p>svg>foreignObject>section img[align=right]{padding-left:20px}div#p>svg>foreignObject>section img[align=left]{padding-right:20px}div#p>svg>foreignObject>section .emoji{background-color:transparent;max-width:none;vertical-align:text-top}div#p>svg>foreignObject>section span.frame,div#p>svg>foreignObject>section span.frame>span{display:block;overflow:hidden}div#p>svg>foreignObject>section span.frame>span{border:1px solid #d0d7de;float:left;margin:13px 0 0;padding:7px;width:auto}div#p>svg>foreignObject>section span.frame span img{display:block;float:left}div#p>svg>foreignObject>section span.frame span span{clear:both;color:#24292f;display:block;padding:5px 0 0}div#p>svg>foreignObject>section span.align-center{clear:both;display:block;overflow:hidden}div#p>svg>foreignObject>section span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}div#p>svg>foreignObject>section span.align-center span img{margin:0 auto;text-align:center}div#p>svg>foreignObject>section span.align-right{clear:both;display:block;overflow:hidden}div#p>svg>foreignObject>section span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}div#p>svg>foreignObject>section span.align-right span img{margin:0;text-align:right}div#p>svg>foreignObject>section span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}div#p>svg>foreignObject>section span.float-left span{margin:13px 0 0}div#p>svg>foreignObject>section span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}div#p>svg>foreignObject>section span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section tt{background-color:rgba(175,184,193,.2);border-radius:6px;font-size:85%;margin:0;padding:.2em .4em}div#p>svg>foreignObject>section code br,div#p>svg>foreignObject>section tt br{display:none}div#p>svg>foreignObject>section del code{text-decoration:inherit}div#p>svg>foreignObject>section pre code{font-size:100%}div#p>svg>foreignObject>section pre>code{background:transparent;border:0;margin:0;padding:0;white-space:pre;word-break:normal}div#p>svg>foreignObject>section .highlight{margin-bottom:16px}div#p>svg>foreignObject>section .highlight pre{margin-bottom:0;word-break:normal}div#p>svg>foreignObject>section pre{background-color:#f6f8fa;border-radius:6px;font-size:85%;line-height:1.45;overflow:auto;padding:16px}div#p>svg>foreignObject>section pre code,div#p>svg>foreignObject>section pre tt{word-wrap:normal;background-color:transparent;border:0;display:inline;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0}div#p>svg>foreignObject>section .csv-data td,div#p>svg>foreignObject>section .csv-data th{font-size:12px;line-height:1;overflow:hidden;padding:5px;text-align:left;white-space:nowrap}div#p>svg>foreignObject>section .csv-data .blob-num{background:#fff;border:0;padding:10px 8px 9px;text-align:right}div#p>svg>foreignObject>section .csv-data tr{border-top:0}div#p>svg>foreignObject>section .csv-data th{background:#f6f8fa;border-top:0;font-weight:600}div#p>svg>foreignObject>section .footnotes{border-top:1px solid #d0d7de;color:#57606a;font-size:12px}div#p>svg>foreignObject>section div#p>svg>foreignObject>section section.footnotes{--marpit-root-font-size:12px}div#p>svg>foreignObject>section .footnotes ol{padding-left:16px}div#p>svg>foreignObject>section .footnotes li{position:relative}div#p>svg>foreignObject>section .footnotes li:target:before{border:2px solid #0969da;border-radius:6px;bottom:-8px;content:"";left:-24px;pointer-events:none;position:absolute;right:-8px;top:-8px}div#p>svg>foreignObject>section .footnotes li:target{color:#24292f}div#p>svg>foreignObject>section .footnotes .data-footnote-backref g-emoji{font-family:monospace}div#p>svg>foreignObject>section .task-list-item{list-style-type:none}div#p>svg>foreignObject>section .task-list-item label{font-weight:400}div#p>svg>foreignObject>section .task-list-item.enabled label{cursor:pointer}div#p>svg>foreignObject>section .task-list-item+.task-list-item{margin-top:3px}div#p>svg>foreignObject>section .task-list-item .handle{display:none}div#p>svg>foreignObject>section .task-list-item-checkbox{margin:0 .2em .25em -1.6em;vertical-align:middle}div#p>svg>foreignObject>section .contains-task-list:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}div#p>svg>foreignObject>section ::-webkit-calendar-picker-indicator{filter:invert(50%)}div#p>svg>foreignObject>section .hljs{background:#fff;color:#333;display:block;overflow-x:auto;padding:.5em}div#p>svg>foreignObject>section .hljs-comment,div#p>svg>foreignObject>section .hljs-meta{color:#969896}div#p>svg>foreignObject>section .hljs-emphasis,div#p>svg>foreignObject>section .hljs-quote,div#p>svg>foreignObject>section .hljs-strong,div#p>svg>foreignObject>section .hljs-template-variable,div#p>svg>foreignObject>section .hljs-variable{color:#df5000}div#p>svg>foreignObject>section .hljs-keyword,div#p>svg>foreignObject>section .hljs-selector-tag,div#p>svg>foreignObject>section .hljs-type{color:#d73a49}div#p>svg>foreignObject>section .hljs-attribute,div#p>svg>foreignObject>section .hljs-bullet,div#p>svg>foreignObject>section .hljs-literal,div#p>svg>foreignObject>section .hljs-symbol{color:#0086b3}div#p>svg>foreignObject>section .hljs-name,div#p>svg>foreignObject>section .hljs-section{color:#63a35c}div#p>svg>foreignObject>section .hljs-tag{color:#333}div#p>svg>foreignObject>section .hljs-attr,div#p>svg>foreignObject>section .hljs-selector-attr,div#p>svg>foreignObject>section .hljs-selector-class,div#p>svg>foreignObject>section .hljs-selector-id,div#p>svg>foreignObject>section .hljs-selector-pseudo,div#p>svg>foreignObject>section .hljs-title{color:#6f42c1}div#p>svg>foreignObject>section .hljs-addition{background-color:#eaffea;color:#55a532}div#p>svg>foreignObject>section .hljs-deletion{background-color:#ffecec;color:#bd2c00}div#p>svg>foreignObject>section .hljs-link{text-decoration:underline}div#p>svg>foreignObject>section .hljs-number{color:#005cc5}div#p>svg>foreignObject>section .hljs-string{color:#032f62}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{max-height:563px}div#p>svg>foreignObject>section h1{color:#246;font-size:1.6em}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2{border-bottom:none}div#p>svg>foreignObject>section h2{font-size:1.3em}div#p>svg>foreignObject>section h3{font-size:1.1em}div#p>svg>foreignObject>section h4{font-size:1.05em}div#p>svg>foreignObject>section h5{font-size:1em}div#p>svg>foreignObject>section h6{font-size:.9em}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{color:#48c;font-weight:inherit}div#p>svg>foreignObject>section hr{height:0;padding-top:.25em}div#p>svg>foreignObject>section pre{border:1px solid #999;line-height:1.15;overflow:visible}div#p>svg>foreignObject>section pre code svg[data-marp-fitting=svg]{max-height:529px}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{color:hsla(0,0%,40%,.75);font-size:18px;left:30px;margin:0;position:absolute}div#p>svg>foreignObject>section header{top:21px}div#p>svg>foreignObject>section footer{bottom:21px}div#p>svg>foreignObject>section{align-items:stretch;background:#fff;display:flex;flex-flow:column nowrap;font-size:29px;height:720px;justify-content:center;padding:78.5px;width:1280px}div#p>svg>foreignObject>section{--marpit-root-font-size:29px}div#p>svg>foreignObject>section>:last-child,div#p>svg>foreignObject>section[data-footer]>:nth-last-child(2){margin-bottom:0}div#p>svg>foreignObject>section>:first-child,div#p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#p>svg>foreignObject>section:after{bottom:21px;color:#777;font-size:24px;padding:0;position:absolute;right:30px}div#p>svg>foreignObject>section:after{--marpit-root-font-size:24px}div#p>svg>foreignObject>section.invert{background-color:#222;color:#e6eaf0}div#p>svg>foreignObject>section.invert:after{color:#999}div#p>svg>foreignObject>section.invert img{background-color:transparent}div#p>svg>foreignObject>section.invert a{color:#50b3ff}div#p>svg>foreignObject>section.invert h1{color:#a3c5e7}div#p>svg>foreignObject>section.invert h2,div#p>svg>foreignObject>section.invert h3,div#p>svg>foreignObject>section.invert h4,div#p>svg>foreignObject>section.invert h5{color:#ebeff5}div#p>svg>foreignObject>section.invert blockquote,div#p>svg>foreignObject>section.invert h6{border-color:#3d3f43;color:#939699}div#p>svg>foreignObject>section.invert h1 strong,div#p>svg>foreignObject>section.invert h2 strong,div#p>svg>foreignObject>section.invert h3 strong,div#p>svg>foreignObject>section.invert h4 strong,div#p>svg>foreignObject>section.invert h5 strong,div#p>svg>foreignObject>section.invert h6 strong{color:#7bf}div#p>svg>foreignObject>section.invert hr{background-color:#3d3f43}div#p>svg>foreignObject>section.invert footer,div#p>svg>foreignObject>section.invert header{color:hsla(0,0%,60%,.75)}div#p>svg>foreignObject>section.invert code,div#p>svg>foreignObject>section.invert kbd{background-color:#111}div#p>svg>foreignObject>section.invert kbd{border-color:#666;box-shadow:inset 0 -1px 0 #555;color:#e6eaf0}div#p>svg>foreignObject>section.invert table tr{background-color:#12181d;border-color:#60657b}div#p>svg>foreignObject>section.invert table tr:nth-child(2n){background-color:#1b2024}div#p>svg>foreignObject>section.invert table td,div#p>svg>foreignObject>section.invert table th{border-color:#5b5e61}div#p>svg>foreignObject>section.invert pre{background-color:#0a0e12;border-color:#777}div#p>svg>foreignObject>section.invert pre code{background-color:transparent}div#p>svg>foreignObject>section[data-color] h1,div#p>svg>foreignObject>section[data-color] h2,div#p>svg>foreignObject>section[data-color] h3,div#p>svg>foreignObject>section[data-color] h4,div#p>svg>foreignObject>section[data-color] h5,div#p>svg>foreignObject>section[data-color] h6{color:currentColor}div#p>svg>foreignObject>section table,div#p>svg>foreignObject>section td,div#p>svg>foreignObject>section th,div#p>svg>foreignObject>section tr{border:0px!important;border-collapse:collapse!important;border:none!important;outline:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#p>svg>foreignObject>section[data-marpit-advanced-background=content],div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id="p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="1" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;--marpit-advanced-background-split:35%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/secondscreen-logo.jpg");background-size:400px auto;"></figure></div></section></foreignObject><foreignObject width="65%" height="720"><section id="1" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="1" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;--marpit-advanced-background-split:35%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><strong>Virtual Display Use Case Exploration</strong></h1>
<p><img src="gfx/draft.png" alt="" style="width:100px;" /></p>
<blockquote>
<p>A Collection of Interesting Ideas</p>
</blockquote>
<h2>Second Screen WG/CG virtual meeting</h2>
<h2>8 June 2022</h2>
<h3><a href="mailto:[email protected]">Anssi Kostiainen</a></h3>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="1" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="2" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;"><table>
<tr>
<td>
<iframe width="533" height="300" src="https://www.youtube-nocookie.com/embed/rmg5tZ4iSx8?start=34" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://www.youtube.com/watch?v=rmg5tZ4iSx8">Deskreen demo</a></p>
</td>
<td>
<iframe width="533" height="300" src="https://www.youtube-nocookie.com/embed/IbN9f8uNT2M?start=182" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://youtu.be/IbN9f8uNT2M?t=180">Sidecar demo</a></p>
</td>
</table>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="3" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1>Virtual Display?</h1>
<blockquote>
<p><em>"a display instance without a physical connection to the graphics card"</em></p>
<p><em>"a software representation of a physical display"</em></p>
</blockquote>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="4" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>UX Considerations <img class="emoji" draggable="false" alt="🤩" src="https://twemoji.maxcdn.com/2/svg/1f929.svg" data-marp-twemoji=""/></strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="11" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="5" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<ul>
<li data-marpit-fragment="1"><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="🚧" src="https://twemoji.maxcdn.com/2/svg/1f6a7.svg" data-marp-twemoji=""/> <strong>Display Arrangement</strong>
<ul>
<li data-marpit-fragment="2"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> OS</li>
</ul>
</li>
<li data-marpit-fragment="3"><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="✅" src="https://twemoji.maxcdn.com/2/svg/2705.svg" data-marp-twemoji=""/> <strong>Display Source Picker</strong>
<ul>
<li data-marpit-fragment="4"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> <a href="https://www.w3.org/TR/screen-capture/#dom-mediadevices-getdisplaymedia"><code>getDisplayMedia()</code></a></li>
<li data-marpit-fragment="5"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> <a href="https://w3c.github.io/mediacapture-fromelement/#dom-htmlmediaelement-capturestream"><code>HTMLMediaElement.captureStream()</code></a>?</li>
</ul>
</li>
<li data-marpit-fragment="6"><img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="🚧" src="https://twemoji.maxcdn.com/2/svg/1f6a7.svg" data-marp-twemoji=""/> <strong>Virtual Display Creation</strong>
<ul>
<li data-marpit-fragment="7"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> OS</li>
</ul>
</li>
<li data-marpit-fragment="8"><img class="emoji" draggable="false" alt="4️⃣" src="https://twemoji.maxcdn.com/2/svg/34-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="✅" src="https://twemoji.maxcdn.com/2/svg/2705.svg" data-marp-twemoji=""/> <strong>Window Placement</strong>
<ul>
<li data-marpit-fragment="9"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> OS</li>
<li data-marpit-fragment="10"><img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> <a href="https://w3c.github.io/window-placement/">Multi-Screen Window Placement API</a>?
<ul>
<li data-marpit-fragment="11">(Virtual workspaces/desktops a <a href="https://github.com/w3c/window-placement/blob/main/EXPLAINER.md#non-goals">non-goal</a>, how about Virtual Displays?)</li>
</ul>
</li>
</ul>
</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="6" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> Display Arrangement</h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="7" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/display-arrangement-macos.png?text=macOS");background-size:600px auto;"></figure><figure style="background-image:url("gfx/display-arrangement-win10.png?text=Windows");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="7" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="7" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="8" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> Display Source Picker</h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="9" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<p><img src="gfx/getdisplaymedia-picker-ui.png" alt="" style="width:600px;" /></p>
<p>(Chrome display source picker UI, <a href="https://www.webrtc-experiment.com/getDisplayMedia/">https://www.webrtc-experiment.com/getDisplayMedia/</a>)</p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="10" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/> Virtual Display Creation</h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="11" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<p><img src="gfx/deskreen-picker-ui.png" alt="" style="width:800px;" /></p>
<p>(Deskreen Virtual Display Picker UI, <a href="https://deskreen.com/">https://deskreen.com/</a>)</p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="12" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> <a href="https://www.w3.org/TR/screen-capture/#dom-mediadevices-getdisplaymedia"><code>getDisplayMedia</code></a> UI vs <img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/> <a href="https://deskreen.com/">Deskreen</a> Virtual Display UI</h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="13" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/getdisplaymedia-picker-ui.png");background-size:600px auto;"></figure><figure style="background-image:url("gfx/deskreen-picker-ui.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="13" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="13" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="14" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="4️⃣" src="https://twemoji.maxcdn.com/2/svg/34-20e3.svg" data-marp-twemoji=""/> Window Placement</h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="15" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Implicit consent example: drag and drop</h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="16" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/dnd.jpg");background-size:800px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="16" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="16" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="16" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="17" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>OSes have a variety of implicit consenting mechanisms</h2>
<ul>
<li>
<p><strong>Keyboard shortcuts</strong> in <a href="https://support.microsoft.com/en-us/windows/keyboard-shortcuts-in-windows-dcc61a57-8ff0-cffe-9796-cb9706c75eec">Windows</a>: "Windows logo key + Shift + Left arrow or Right arrow to move an app or window in the desktop from one monitor to another."</p>
</li>
<li>
<p><strong>Drag and drop evolved</strong> in <a href="https://support.apple.com/en-gb/guide/mac-help/mh14112/12.0/mac/12.0#mchlpd3f278c">macOS</a>: "Drag the app window you want to move to the edge of the screen [or] enter Mission Control, then drag the window up to the space you want to use."</p>
</li>
</ul>
<p>Could such implicit permission grants work for web app window placement?</p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="18" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>The traditional Web API approach: user's consent via browser prompt</h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="19" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/browser.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="19" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="19" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="20" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/browser-with-prompt.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="20" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="20" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="21" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>OS-level: controls built into window manager</h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="22" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/browser.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="22" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="22" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="22" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="23" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/browser-with-os-dialog.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="23" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="23" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="23" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="24" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Browser prompt vs OS controls</h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="25" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gfx/prompt.png");background-size:600px auto;"></figure><figure style="background-image:url("gfx/move-to-display-dialog-green.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="25" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="25" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;" data-marpit-advanced-background="content"><footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="25" data-marpit-pagination-total="50"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="26" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1>Goal: Enable UX innovation and protect the user's privacy</h1>
<blockquote>
<p>How? Set a strong privacy baseline & leave room for Quality of Implementation differentiation?</p>
</blockquote>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="27" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>Virtual Display support for the web</strong></h1>
<h2>Ideation <img class="emoji" draggable="false" alt="🧪" src="https://twemoji.maxcdn.com/2/svg/1f9ea.svg" data-marp-twemoji=""/></h2>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="28" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Goals</h2>
<ul>
<li><em>"Let me create a new virtual display surface & place windows on it, get its relative positioning and a representation I can pass on to other Web APIs."</em></li>
<li><a href="https://www.w3.org/TR/mediacapture-streams/#dom-mediastream"><code>MediaStream</code></a> as the "common currency" for <a href="https://www.w3.org/TR/screen-capture/#dom-mediadevices-getdisplaymedia"><code>getDisplayMedia</code></a> & WebRTC interop</li>
<li>Reuse existing API constructs and browser and OS UI/UX</li>
</ul>
<h3>Constraints</h3>
<ul>
<li>Agnostic with regard to the display technology</li>
<li>Meet security and privacy expectations</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="29" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Assumptions</h2>
<ul>
<li>Web users expect <a href="https://w3c.github.io/window-placement/#motivations">multi-screen use cases</a> to work similarly with Virtual Displays</li>
<li>Web APIs shouldn't(?) fully abstract away virtual/physical display boundary</li>
</ul>
<h2>Requirements (to make this a 1st class web capability) <img class="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/2/svg/1f44b.svg" data-marp-twemoji=""/></h2>
<ul>
<li>A new virtual <a href="https://www.w3.org/TR/screen-capture/#dfn-display-surface">display surface</a> type that maps to an OS-level concept</li>
<li>Allow {<a href="https://github.com/w3c/window-placement/issues/92#issuecomment-1092384046">extending</a>|mirroring} of {<a href="https://www.w3.org/TR/screen-capture/#dfn-monitor">monitor</a>|<a href="https://www.w3.org/TR/screen-capture/#dfn-windows">window</a>|<a href="https://www.w3.org/TR/screen-capture/#dfn-browser">browser</a>} <a href="https://www.w3.org/TR/screen-capture/#dfn-display-surface">display surface</a> to a virtual display surface</li>
<li>User-initiated and programmatic window placement</li>
<li>Use platform-native UX concepts (e.g. drag/move windows across, share controls)</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="30" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Related work</h2>
<ul>
<li>Platform-level: open-source projects (<a href="https://deskreen.com/">Deskreen</a>), mainstream product features (<a href="https://support.apple.com/en-gb/HT210380">Sidecar</a>) and more...</li>
</ul>
<h2>Related, but different use cases</h2>
<ul>
<li>Present a new document (<a href="https://www.w3.org/TR/presentation-api/">Presentation API</a>) or video element (<a href="https://www.w3.org/TR/remote-playback/">Remote Playback API</a>)</li>
<li>Share controls across devices: <a href="https://en.wikipedia.org/wiki/Synergy_(software)">Synergy</a>/<a href="https://github.com/debauchee/barrier">Barrier</a>, <a href="https://www.youtube.com/watch?v=0rs6WMN0uUE">Logitech Flow</a>, <a href="https://support.apple.com/en-ca/HT212757">Universal Control</a></li>
<li>Admin/advanced: various <a href="https://en.wikipedia.org/wiki/Remote_desktop_software">Remote desktop software</a>, <a href="https://docs.microsoft.com/en-us/windows/powertoys/fancyzones">PowerToys FancyZones</a> layouts</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="31" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>Deskreen Experiments <img class="emoji" draggable="false" alt="🧪" src="https://twemoji.maxcdn.com/2/svg/1f9ea.svg" data-marp-twemoji=""/></strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="32" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Use Case <img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/>: Browser of the tablet as an ad-hoc Virtual Display</h2>
<blockquote>
<p>"<em>Sometimes</em> I want to use the display of my tablet along with my primary device's display and let web apps make use of both. I want to be able to control what web content to present on my tablet."</p>
</blockquote>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="33" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<p><video src="demos/deskreen.mp4" controls width="960" height="540"></video><br />
<a href="demos/deskreen.mp4">Download video as .mp4</a></p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="34" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Use Case <img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/>: TV as an ad-hoc Virtual Display</h2>
<blockquote>
<p>"<em>Sometimes</em> when lounging in the living room I want to extend my workspace to the TV. I want to stay in control of what web content to share on the TV to a larger audience."</p>
</blockquote>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="35" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<p><video src="demos/deskreen+presentation-api.mp4" controls width="960" height="540"></video><br />
<a href="demos/deskreen+presentation-api.mp4">Download video as .mp4</a></p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="36" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> Prototype Implementation Details</h2>
<ol>
<li><a href="https://deskreen.com/">Deskreen</a> mirrors a virtual display (created with <a href="https://github.com/waydabber/BetterDummy">BetterDummy</a>) to a browser window on a tablet</li>
</ol>
<ul>
<li>WebRTC MediaStream</li>
<li>Same LAN</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="37" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2>Deskreen Architecture</h2>
<p><img src="https://raw.githubusercontent.com/pavlobu/deskreen/master/doc/architecture/deskreen-arch-pavlobu-21012021.svg" alt="" style="height:500px;" /></p>
<p>See also: <a href="https://raw.githubusercontent.com/pavlobu/deskreen/master/doc/init-sharing-session/deskreen-webrtc-screen-sharing-session-initiation-pavlobu-22012021.svg">session initiation sequence diagram</a></p>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="38" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h2><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> Prototype Implementation Details</h2>
<ol>
<li><a href="https://deskreen.com/">Deskreen</a> mirrors a virtual display (created with <a href="https://github.com/waydabber/BetterDummy">BetterDummy</a>) to an offscreen browser window</li>
<li><a href="https://www.w3.org/TR/presentation-api/">Presentation API</a> mirrors that offscreen browser window to a TV connected to a Chromecast (<a href="https://w3c.github.io/presentation-api/#dfn-1-ua">1-UA mode</a> triggered via browser UI)</li>
</ol>
<ul>
<li>WebRTC MediaStream <img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> <a href="https://source.chromium.org/chromium/chromium/src/+/main:components/mirroring/">Cast Mirroring</a></li>
<li>Chromecast in same LAN</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="39" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>Design Noodling <img class="emoji" draggable="false" alt="🍜" src="https://twemoji.maxcdn.com/2/svg/1f35c.svg" data-marp-twemoji=""/></strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="40" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="40" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> Display Arrangement</h1>
<h3><img class="emoji" draggable="false" alt="⚙️" src="https://twemoji.maxcdn.com/2/svg/2699.svg" data-marp-twemoji=""/> OS & Platform APIs - built-in feature, some API gaps</h3>
<ul>
<li><a href="https://support.microsoft.com/en-us/windows/multiple-desktops-in-windows-36f52e38-5b4a-557b-2ff9-e1a60c976434">Windows "multiple desktops"</a> / <a href="https://docs.microsoft.com/en-us/windows/win32/shell/virtualdesktopmanager">VirtualDesktopManager</a></li>
<li><a href="https://support.apple.com/en-gb/guide/mac-help/mh14112/mac">macOS "spaces"</a> / no public API</li>
<li><a href="https://chromeos.dev/en/productivity/virtual-desktops">Chrome OS "virtual desks"</a> / <a href="https://github.com/w3c/window-placement/issues/68">Wayland API issues</a></li>
</ul>
<h3><img class="emoji" draggable="false" alt="🌍" src="https://twemoji.maxcdn.com/2/svg/1f30d.svg" data-marp-twemoji=""/> Web APIs</h3>
<ul>
<li><a href="https://w3c.github.io/window-placement/#virtual-screen-arrangement">Virtual screen arrangement</a> readable via <a href="https://w3c.github.io/window-placement/#dom-window-getscreendetails"><code>getScreenDetails()</code></a></li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="41" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="41" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> Display Source Picker</h1>
<h3><img class="emoji" draggable="false" alt="🌍" src="https://twemoji.maxcdn.com/2/svg/1f30d.svg" data-marp-twemoji=""/> Web APIs</h3>
<ul>
<li><img class="emoji" draggable="false" alt="✅" src="https://twemoji.maxcdn.com/2/svg/2705.svg" data-marp-twemoji=""/> <a href="https://www.w3.org/TR/screen-capture/#dom-mediadevices-getdisplaymedia"><code>getDisplayMedia()</code></a> satisfies "<a href="https://www.w3.org/TR/screen-capture/#dfn-display-surface">display surface</a> to <a href="https://www.w3.org/TR/mediacapture-streams/#dom-mediastream"><code>MediaStream</code></a>" req / <a href="https://www.w3.org/TR/screen-capture/#intro">screen mirroring/sharing use case</a></li>
<li><img class="emoji" draggable="false" alt="🚧" src="https://twemoji.maxcdn.com/2/svg/1f6a7.svg" data-marp-twemoji=""/> Virtual display surface type</li>
<li><img class="emoji" draggable="false" alt="🚧" src="https://twemoji.maxcdn.com/2/svg/1f6a7.svg" data-marp-twemoji=""/> Picker UI for virtual displays (create a new?)</li>
</ul>
<p>getDisplayMedia extension ideas (reusable for picking multiple virtual displays?):</p>
<ul>
<li><a href="https://github.com/w3c/mediacapture-screen-share/issues/204">getDisplayMedia issue #204: Concurrent capture of multiple surfaces</a></li>
<li><a href="https://github.com/WICG/multicapture">Capture multiple surfaces w/ getDisplayMedia proposal</a></li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="42" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="42" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/> Virtual Display Creation</h1>
<h3><img class="emoji" draggable="false" alt="⚙️" src="https://twemoji.maxcdn.com/2/svg/2699.svg" data-marp-twemoji=""/> OS & Platform APIs - "advanced users only"</h3>
<ul>
<li>Windows: user-mode <a href="https://docs.microsoft.com/en-us/windows-hardware/drivers/display/indirect-display-driver-model-overview">indirect display driver model</a></li>
<li>macOS: 3rd party tools e.g. <a href="https://github.com/waydabber/BetterDummy">BetterDummy</a></li>
<li>Linux: e.g. <a href="https://www.phoronix.com/scan.php?page=news_item&px=GNOME-40-Headless-Virtual">GNOME headless native backend</a> in <a href="https://gitlab.gnome.org/GNOME/mutter">Mutter</a></li>
<li>Generic: physical <a href="https://www.google.com/search?q=%22dummy+display+plug%22">Dummy Display Plugs</a>, various <a href="https://github.com/pavlobu/deskreen/discussions/86">Virtual Display drivers</a></li>
</ul>
<h3><img class="emoji" draggable="false" alt="🚫" src="https://twemoji.maxcdn.com/2/svg/1f6ab.svg" data-marp-twemoji=""/> Web APIs</h3>
<ul>
<li>Virtual Display concept does not exists
<ul>
<li>Interesting parallels: <a href="https://www.w3.org/TR/audio-output/">Audio Output Devices API</a> to allow routing audio to a "virtual" (other than the default) audio sink, see also <a href="https://www.w3.org/TR/audio-output/#algorithms-new-sink-available">new sink available</a></li>
</ul>
</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="43" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="43" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>API Ideation <img class="emoji" draggable="false" alt="💡" src="https://twemoji.maxcdn.com/2/svg/1f4a1.svg" data-marp-twemoji=""/></strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="44" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h4>Reusable concepts</h4>
<ul>
<li><a href="https://www.w3.org/TR/screen-capture/#dfn-display-surface">display surface</a> and its <a href="https://www.w3.org/TR/screen-capture/#dom-displaycapturesurfacetype"><code>DisplayCaptureSurfaceType</code></a></li>
<li><a href="https://www.w3.org/TR/screen-capture/#cursorcaptureconstraint"><code>CursorCaptureConstraint</code></a></li>
<li><a href="https://w3c.github.io/window-placement/#virtual-screen-arrangement">virtual screen arrangement</a>, <a href="https://w3c.github.io/window-placement/#dom-screen-isextended"><code>isExtended</code></a>, <a href="https://w3c.github.io/window-placement/#dom-window-getscreendetails"><code>getScreenDetails()</code></a></li>
</ul>
<h4><a href="https://www.w3.org/TR/screen-capture/#dom-mediadevices-getdisplaymedia"><code>getDisplayMedia</code></a> extensions</h4>
<ul>
<li>Picker UI extended to allow a new Virtual Display creation</li>
<li>Extend <a href="https://www.w3.org/TR/screen-capture/#dom-displaycapturesurfacetype"><code>DisplayCaptureSurfaceType</code></a> enum with <code>virtual</code></li>
<li>Reuse existing signaling of <a href="https://www.w3.org/TR/screen-capture/#hidden-display-surfaces">closed/minimized display surfaces</a></li>
<li>...</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="45" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="45" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1>IDL sketch</h1>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>partial interface MediaDevices {
Promise<MediaStream> getDisplayMedia(optional DisplayMediaStreamConstraints constraints = {});
};
enum DisplayCaptureSurfaceType {
"monitor",
"window",
"browser",
"virtual" // new
};
</span></span></foreignObject></svg></code></pre>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="46" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="46" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1>Considered Alternatives</h1>
<h3>New "<code>getDisplaySurface</code>" API</h3>
<ul>
<li>Redundant if <code>getDisplayMedia</code> extensions satisfy reqs</li>
</ul>
<h3>Presentation API extension</h3>
<ul>
<li><a href="https://github.com/w3c/presentation-api/issues/439">Presentation API Presentation of objects proposal</a> incl. <code>MediaStream</code></li>
<li><a href="https://github.com/webscreens/site-initiated-mirroring/blob/main/explainer.md">Site Initiated Mirroring API</a>
<ul>
<li><a href="https://github.com/webscreens/site-initiated-mirroring/blob/main/explainer.md#extend-getdisplaymedia">getDisplayMedia extension</a>: "no API that allows a MediaStream to be sent directly to a secondary display (without going through WebRTC)."</li>
</ul>
</li>
</ul>
<h3>Remote Playback API extensions</h3>
<ul>
<li>Remote Playback API via <code>HTMLMediaElement.srcObject = ms</code> too much indirection</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="47" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong>Possible path from an Exploration onwards</strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="48" data-marpit-fragments="12" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="48" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<ul>
<li data-marpit-fragment="1"><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> <img src="w3c.png" alt="" style="width:40px;" /> Explainer <a href="https://github.com/w3ctag/tag.w3.org/blob/main/explainers/template.md"><img class="emoji" draggable="false" alt="🔗" src="https://twemoji.maxcdn.com/2/svg/1f517.svg" data-marp-twemoji=""/></a>
<ul>
<li data-marpit-fragment="2">
<blockquote>
<p>Use cases, reqs, API sketch, considered alternatives <code><img class="emoji" draggable="false" alt="📍" src="https://twemoji.maxcdn.com/2/svg/1f4cd.svg" data-marp-twemoji=""/>We are here!</code></p>
</blockquote>
</li>
</ul>
</li>
<li data-marpit-fragment="3"><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> <img src="w3c.png" alt="" style="width:40px;" /> Explainer review
<ul>
<li data-marpit-fragment="4">
<blockquote>
<p>Web community, browser & OS vendors, hardware ecosystem</p>
</blockquote>
</li>
</ul>
</li>
<li data-marpit-fragment="5"><img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/> <img src="w3c.png" alt="" style="width:40px;" /> Draft web spec
<ul>
<li data-marpit-fragment="6">
<blockquote>
<p>W3C Second Screen CG in collaboration with WebRTC WG?</p>
</blockquote>
</li>
</ul>
</li>
<li data-marpit-fragment="7"><img class="emoji" draggable="false" alt="4️⃣" src="https://twemoji.maxcdn.com/2/svg/34-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="🧪" src="https://twemoji.maxcdn.com/2/svg/1f9ea.svg" data-marp-twemoji=""/> Prototype in code
<ul>
<li data-marpit-fragment="8">
<blockquote>
<p>Example: <a href="https://www.chromium.org/blink/launching-features/">Chromium</a> launch process</p>
</blockquote>
</li>
</ul>
</li>
<li data-marpit-fragment="9"><img class="emoji" draggable="false" alt="5️⃣" src="https://twemoji.maxcdn.com/2/svg/35-20e3.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="📢" src="https://twemoji.maxcdn.com/2/svg/1f4e2.svg" data-marp-twemoji=""/> Prototype feedback
<ul>
<li data-marpit-fragment="10">
<blockquote>
<p>Web developer feedback can change the shape of the API significantly</p>
</blockquote>
</li>
</ul>
</li>
<li data-marpit-fragment="11"><img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/> <img src="w3c.png" alt="" style="width:40px;" /> Standards track
<ul>
<li data-marpit-fragment="12">
<blockquote>
<p>Subject to support, possible WG adoption</p>
</blockquote>
</li>
</ul>
</li>
</ul>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="49" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="49" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<h1><strong><code></html></code></strong></h1>
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="50" data-paginate="true" data-background-color="#fff" data-footer=" Second Screen WG/CG virtual meeting" data-theme="default" data-marpit-pagination="50" data-marpit-pagination-total="50" style="--paginate:true;--background-color:#fff;--footer: Second Screen WG/CG virtual meeting;--theme:default;background-color:#fff;background-image:none;">
<footer><img src="gfx/w3c.png" alt="" style="width:50px;" /> Second Screen WG/CG virtual meeting</footer>
</section>
<script>!function(){"use strict";const t="marpitSVGPolyfill:setZoomFactor,",e=Symbol();let r,o;function n(n){const i="object"==typeof n&&n.target||document,a="object"==typeof n?n.zoom:n;window[e]||(Object.defineProperty(window,e,{configurable:!0,value:!0}),window.addEventListener("message",(({data:e,origin:r})=>{if(r===window.origin)try{if(e&&"string"==typeof e&&e.startsWith(t)){const[,t]=e.split(","),r=Number.parseFloat(t);Number.isNaN(r)||(o=r)}}catch(t){console.error(t)}})));let l=!1;Array.from(i.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,n,i,s;t.style.transform||(t.style.transform="translateZ(0)");const c=a||o||t.currentScale||1;r!==c&&(r=c,l=c);const d=t.getBoundingClientRect(),{length:u}=t.children;for(let r=0;r<u;r+=1){const o=t.children[r],a=o.getScreenCTM();if(a){const t=null!==(n=null===(e=o.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==n?n:0,r=null!==(s=null===(i=o.y)||void 0===i?void 0:i.baseVal.value)&&void 0!==s?s:0,l=o.firstElementChild,{style:u}=l;u.transformOrigin||(u.transformOrigin=`${-t}px ${-r}px`),u.transform=`scale(${c}) matrix(${a.a}, ${a.b}, ${a.c}, ${a.d}, ${a.e-d.left}, ${a.f-d.top}) translateZ(0.0001px)`}}})),!1!==l&&Array.from(i.querySelectorAll("iframe"),(({contentWindow:e})=>{null==e||e.postMessage(`${t}${l}`,"null"===window.origin?"*":window.origin)}))}r=1,o=void 0;const i=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};function a({once:t=!1,target:e=document}={}){const r="Apple Computer, Inc."===navigator.vendor?[n]:[];let o=!t;const a=()=>{for(const t of r)t({target:e});!function(t=document){Array.from(t.querySelectorAll('svg[data-marp-fitting="svg"]'),(t=>{var e;const r=t.firstChild,o=r.firstChild,{scrollWidth:n,scrollHeight:a}=o;let l,s=1;if(t.hasAttribute("data-marp-fitting-code")&&(l=null===(e=t.parentElement)||void 0===e?void 0:e.parentElement),t.hasAttribute("data-marp-fitting-math")&&(l=t.parentElement),l){const t=getComputedStyle(l),e=Math.ceil(l.clientWidth-parseFloat(t.paddingLeft||"0")-parseFloat(t.paddingRight||"0"));e&&(s=e)}const c=Math.max(n,s),d=Math.max(a,1),u=`0 0 ${c} ${d}`;i(r,"width",`${c}`),i(r,"height",`${d}`),i(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),i(t,"viewBox",u)&&t.classList.toggle("__reflow__")}))}(e),o&&window.requestAnimationFrame(a)};return a(),()=>{o=!1}}const l=Symbol(),s=document.currentScript;((t=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(t[l])return t[l];const e=a({target:t}),r=()=>{e(),delete t[l]};Object.defineProperty(t,l,{configurable:!0,value:r})})(s?s.getRootNode():document)}();
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="48" tabindex="0"><p># References
## Specs</p><p>## Product-related</p><p>## Somewhat Related Demos</p></div><script>/*!! License: https://unpkg.com/@marp-team/[email protected]/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";const e=document.body,t=(...e)=>history.replaceState(...e),n="presenter",r="next",o=["",n,r],a="data-bespoke-marp-",i=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${o}`},s=()=>e.dataset.bespokeView,l=e=>new URLSearchParams(location.search).get(e),d=(e,n={})=>{var r;const o={location,setter:t,...n},a=new URLSearchParams(o.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?a.set(t,n):a.delete(t)}try{o.setter({...null!==(r=window.history.state)&&void 0!==r?r:{}},"",i(a,o.location))}catch(e){console.error(e)}},c=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),u=e=>{try{return localStorage.getItem(e)}catch(e){return null}},f=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},m=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},g=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},p=e=>{e.parent.classList.add("bespoke-marp-parent"),e.slides.forEach((e=>e.classList.add("bespoke-marp-slide"))),e.on("activate",(t=>{const n="bespoke-marp-active",r=t.slide,o=r.classList,a=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),g(e,!0)})),o.add(n),g(r,!1),a){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},v=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t<r||t===r&&n<=o;e.setAttribute(`${a}fragment`,(i?"":"in")+"active");const s=`${a}current-fragment`;t===r&&n===o?e.setAttribute(s,"current"):e.removeAttribute(s)}))})),e.fragmentIndex=o;const i={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:a=!0})=>{if(a){if(r(1))return o(t,n+1),!1;const a=t+1;e.fragments[a]&&o(a,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const a=e.fragments[t+1];a&&o(t+1,a.length-1)}})),e.on("prev",(({fragment:a=!0})=>{if(r(-1)&&a)return o(t,n-1),!1;const i=t-1;e.fragments[i]&&o(i,e.fragments[i].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},h=document,y=()=>!(!h.fullscreenEnabled&&!h.webkitFullscreenEnabled),b=()=>!(!h.fullscreenElement&&!h.webkitFullscreenElement),x=e=>{e.fullscreen=()=>{y()&&(async()=>{return b()?null===(e=h.exitFullscreen||h.webkitExitFullscreen)||void 0===e?void 0:e.call(h):((e=h.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!y()||(e.fullscreen(),t.preventDefault())}))},w="bespoke-marp-inactive",k=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let a;const i=()=>{a&&clearTimeout(a),a=setTimeout((()=>{r.add(w),o()}),e),r.contains(w)&&(r.remove(w),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,i);setTimeout(i,0)},E=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],L=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(E.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},$=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute(`${a}load`,e)}}))},S=({interval:e=250}={})=>t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else if(" "!==e.key||e.shiftKey)if("ArrowRight"===e.key||"ArrowDown"===e.key||"PageDown"===e.key)t.next({fragment:!e.shiftKey});else if("End"===e.key)t.slide(t.slides.length-1,{fragment:-1});else{if("Home"!==e.key)return;t.slide(0)}else t.next();e.preventDefault()}));let n,r,o=0;t.parent.addEventListener("wheel",(a=>{let i=!1;const s=(e,t)=>{e&&(i=i||((e,t)=>((e,t)=>{const n="X"===t?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]})(e,t)&&((e,t)=>{const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r})(getComputedStyle(e),t))(e,t)),(null==e?void 0:e.parentElement)&&s(e.parentElement,t)};if(0!==a.deltaX&&s(a.target,"X"),0!==a.deltaY&&s(a.target,"Y"),i)return;a.preventDefault();const l=Math.sqrt(a.deltaX**2+a.deltaY**2);if(void 0!==a.wheelDelta){if(void 0===a.webkitForce&&Math.abs(a.wheelDelta)<40)return;if(a.deltaMode===a.DOM_DELTA_PIXEL&&l<4)return}else if(a.deltaMode===a.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const d=Date.now()-o<e,c=l<=n;if(n=l,d||c)return;let u;(a.deltaX>0||a.deltaY>0)&&(u="next"),(a.deltaX<0||a.deltaY<0)&&(u="prev"),u&&(t[u](),o=Date.now())}))},P=(e=".bespoke-marp-osc")=>{const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[${a}osc=${JSON.stringify(e)}]`).forEach(n)};return y()||n("fullscreen",(e=>e.style.display="none")),c||n("presenter",(e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."})),e=>{t.addEventListener("click",(t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;n&&t.target.blur();const r={fragment:!t.shiftKey};"next"===n?e.next(r):"prev"===n?e.prev(r):"fullscreen"===n?null==e||e.fullscreen():"presenter"===n&&e.openPresenterView()}})),e.parent.appendChild(t),e.on("activate",(({index:t})=>{n("page",(n=>n.textContent=`Page ${t+1} of ${e.slides.length}`))})),e.on("fragment",(({index:t,fragments:r,fragmentIndex:o})=>{n("prev",(e=>e.disabled=0===t&&0===o)),n("next",(n=>n.disabled=t===e.slides.length-1&&o===r.length-1))})),e.on("marp-active",(()=>g(t,!1))),e.on("marp-inactive",(()=>g(t,!0))),y()&&(e=>{for(const t of["","webkit"])h.addEventListener(t+"fullscreenchange",e)})((()=>n("fullscreen",(e=>e.classList.toggle("exit",y()&&b())))))}},T=e=>{window.addEventListener("message",(t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");let o=Number.parseInt(t,10),a=Number.parseInt(n,10)+1;a>=e.fragments[o].length&&(o+=1,a=0),e.slide(o,{fragment:a})}}))};var I=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let N=e=>String(e).replace(/[&<>"']/g,(e=>`&${C[e]};`)),C={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},A="dangerouslySetInnerHTML",D={className:"class",htmlFor:"for"},M={};function B(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==A&&(r+=` ${D[e]?D[e]:N(e)}="${N(t[e])}"`);r+=">"}if(-1===I.indexOf(e)){if(t[A])r+=t[A].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===M[e]?e:N(e)}r+=e?`</${e}>`:""}return M[r]=!0,r}const K=({children:e})=>B(null,null,...e),O="bespoke-marp-presenter-",q={container:`${O}container`,dragbar:`${O}dragbar-container`,next:`${O}next`,nextContainer:`${O}next-container`,noteContainer:`${O}note-container`,noteWrapper:`${O}note-wrapper`,noteButtons:`${O}note-buttons`,infoContainer:`${O}info-container`,infoPage:`${O}info-page`,infoPageText:`${O}info-page-text`,infoPagePrev:`${O}info-page-prev`,infoPageNext:`${O}info-page-next`,noteButtonsBigger:`${O}note-bigger`,noteButtonsSmaller:`${O}note-smaller`,infoTime:`${O}info-time`,infoTimer:`${O}info-timer`},_=e=>{const{title:t}=document;document.title="[Presenter view]"+(t?` - ${t}`:"");const n={},r=e=>(n[e]=n[e]||document.querySelector(`.${e}`),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=q.container,t.appendChild(e),t.insertAdjacentHTML("beforeend",B(K,null,B("div",{class:q.nextContainer},B("iframe",{class:q.next,src:"?view=next"})),B("div",{class:q.dragbar}),B("div",{class:q.noteContainer},B("div",{class:q.noteWrapper}),B("div",{class:q.noteButtons},B("button",{class:q.noteButtonsSmaller,tabindex:"-1",title:"Smaller notes font size"},"Smaller notes font size"),B("button",{class:q.noteButtonsBigger,tabindex:"-1",title:"Bigger notes font size"},"Bigger notes font size"))),B("div",{class:q.infoContainer},B("div",{class:q.infoPage},B("button",{class:q.infoPagePrev,tabindex:"-1",title:"Previous"},"Previous"),B("span",{class:q.infoPageText}),B("button",{class:q.infoPageNext,tabindex:"-1",title:"Next"},"Next")),B("time",{class:q.infoTime,title:"Current time"}),B("time",{class:q.infoTimer,title:"Timer"})))),t})(e.parent)),(e=>{let t=!1;r(q.dragbar).addEventListener("mousedown",(()=>{t=!0,r(q.dragbar).classList.add("active")})),window.addEventListener("mouseup",(()=>{t=!1,r(q.dragbar).classList.remove("active")})),window.addEventListener("mousemove",(e=>{if(!t)return;const n=e.clientX/document.documentElement.clientWidth*100;r(q.container).style.setProperty("--bespoke-marp-presenter-split-ratio",`${Math.max(0,Math.min(100,n))}%`)})),r(q.nextContainer).addEventListener("click",(()=>e.next()));const n=r(q.next),o=(a=n,(e,t)=>{var n;return null===(n=a.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var a;n.addEventListener("load",(()=>{r(q.nextContainer).classList.add("active"),o(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>o(e,t)))}));const i=document.querySelectorAll(".bespoke-marp-note");i.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(q.noteWrapper).appendChild(e)})),e.on("activate",(()=>i.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide())))));let s=0;const l=e=>{s=Math.max(-5,s+e),r(q.noteContainer).style.setProperty("--bespoke-marp-note-font-scale",(1.2**s).toFixed(4))},d=()=>l(1),c=()=>l(-1),u=r(q.noteButtonsBigger),f=r(q.noteButtonsSmaller);u.addEventListener("click",(()=>{u.blur(),d()})),f.addEventListener("click",(()=>{f.blur(),c()})),document.addEventListener("keydown",(e=>{"+"===e.key&&d(),"-"===e.key&&c()}),!0),e.on("activate",(({index:t})=>{r(q.infoPageText).textContent=`${t+1} / ${e.slides.length}`}));const m=r(q.infoPagePrev),g=r(q.infoPageNext);m.addEventListener("click",(t=>{m.blur(),e.prev({fragment:!t.shiftKey})})),g.addEventListener("click",(t=>{g.blur(),e.next({fragment:!t.shiftKey})})),e.on("fragment",(({index:t,fragments:n,fragmentIndex:r})=>{m.disabled=0===t&&0===r,g.disabled=t===e.slides.length-1&&r===n.length-1}));let p=new Date;const v=()=>{const e=new Date,t=e=>`${Math.floor(e)}`.padStart(2,"0"),n=e.getTime()-p.getTime(),o=t(n/1e3%60),a=t(n/1e3/60%60),i=t(n/36e5%24);r(q.infoTime).textContent=e.toLocaleTimeString(),r(q.infoTimer).textContent=`${i}:${a}:${o}`};v(),setInterval(v,250),r(q.infoTimer).addEventListener("click",(()=>{p=new Date}))})(e)},X=e=>{if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:F},presenterUrl:{enumerable:!0,get:U}}),c&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))};function F(){const{max:e,floor:t}=Math,n=e(t(.85*window.innerWidth),640),r=e(t(.85*window.innerHeight),360);return window.open(this.presenterUrl,O+this.syncKey,`width=${n},height=${r},menubar=no,toolbar=no`)}function U(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),i(e)}const V=e=>{const t=s();return t===r&&e.appendChild(document.createElement("span")),{"":X,[n]:_,[r]:T}[t]},R=e=>{e.on("activate",(t=>{document.querySelectorAll(".bespoke-progress-parent > .bespoke-progress-bar").forEach((n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"}))}))},j=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t},H=(e={})=>{const t={history:!0,...e};return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},o=(t={fragment:!0})=>{((t,n)=>{const{min:r,max:o}=Math,{fragments:a,slides:i}=e,s=o(0,r(t,i.length-1)),l=o(0,r(n||0,a[s].length-1));s===e.slide()&&l===e.fragmentIndex||e.slide(s,{fragment:l})})((j(location.hash.slice(1))||1)-1,t.fragment?j(l("f")||""):null)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||d({f:0===r||r.toString()},{location:{...location,hash:`#${e+1}`},setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})})),setTimeout((()=>{o(),window.addEventListener("hashchange",(()=>r((()=>{o({fragment:!1}),d({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>o()))})),n=!1}),0)}},W=(e={})=>{var n;const r=e.key||(null===(n=window.history.state)||void 0===n?void 0:n.marpBespokeSyncKey)||Math.random().toString(36).slice(2),o=`bespoke-marp-sync-${r}`;var a;a={marpBespokeSyncKey:r},d({},{setter:(e,...n)=>t({...e,...a},...n)});const i=()=>{const e=u(o);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=i(),n={...t,...e(t)};return f(o,JSON.stringify(n)),n},l=()=>{window.removeEventListener("pageshow",l),s((e=>({reference:(e.reference||0)+1})))};return e=>{l(),Object.defineProperty(e,"syncKey",{value:r,enumerable:!0});let t=!0;setTimeout((()=>{e.on("fragment",(e=>{t&&s((()=>({index:e.index,fragmentIndex:e.fragmentIndex})))}))}),0),window.addEventListener("storage",(n=>{if(n.key===o&&n.oldValue&&n.newValue){const r=JSON.parse(n.oldValue),o=JSON.parse(n.newValue);if(r.index!==o.index||r.fragmentIndex!==o.fragmentIndex)try{t=!1,e.slide(o.index,{fragment:o.fragmentIndex})}finally{t=!0}}}));const n=()=>{const{reference:e}=i();void 0===e||e<=1?m(o):s((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",l),n()})),e.on("destroy",n)}},{PI:Y,abs:J,sqrt:z,atan2:G}=Math,Q={passive:!0},Z=({slope:e=-.7,swipeThreshold:t=30}={})=>n=>{let r;const o=n.parent,a=e=>{const t=o.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};o.addEventListener("touchstart",(({touches:e})=>{r=1===e.length?a(e[0]):void 0}),Q),o.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=a(e.touches[0]),n=t.x-r.x,o=t.y-r.y;r.delta=z(J(n)**2+J(o)**2),r.radian=G(n,o)}else r=void 0})),o.addEventListener("touchend",(o=>{if(r){if(r.delta&&r.delta>=t&&r.radian){const t=(r.radian-e+Y)%(2*Y)-Y;n[t<0?"next":"prev"](),o.stopPropagation()}r=void 0}}),Q)},ee="_tA",te=e=>{const t=document.documentTransition;if(!t)return;let n;e._tP=!1;const r=(n,{back:r,cond:o})=>a=>{var i,s;const l=e.slides[e.slide()].querySelector("section[data-transition]");if(!l)return!0;const d=document.querySelector(".bespoke-marp-osc"),c=d?[d]:void 0;if(e._tP){if(a._tA){e._tP=!1;try{t.start({sharedElements:c}).catch((()=>{}))}catch(e){}return!0}}else{if(!o(a))return!0;const d="transition"+(a.back||r?"Back":""),u=Number.parseInt(null!==(i=l.dataset[`${d}Duration`])&&void 0!==i?i:"",10),f=Number.parseInt(null!==(s=l.dataset[`${d}Delay`])&&void 0!==s?s:"",10),m={};Number.isNaN(u)||(m.duration=u.toString()),Number.isNaN(f)||(m.delay=f.toString()),e._tP=t.prepare({rootTransition:l.dataset[d],rootConfig:m,sharedElements:c}).then((()=>n(a))).catch((()=>n(a)))}return!1};e.on("prev",r((t=>e.prev({...t,[ee]:!0})),{back:!0,cond:e=>{var t;return e.index>0&&!((null===(t=e.fragment)||void 0===t||t)&&n.fragmentIndex>0)}})),e.on("next",r((t=>e.next({...t,[ee]:!0})),{cond:t=>t.index+1<e.slides.length&&!(n.fragmentIndex+1<n.fragments.length)})),setTimeout((()=>{e.on("slide",r((t=>e.slide(t.index,{...t,[ee]:!0})),{cond:t=>{const n=e.slide();return t.index!==n&&(t.back=t.index<n,!0)}}))}),0),e.on("fragment",(e=>{n=e}))};let ne;const re=()=>(void 0===ne&&(ne="wakeLock"in navigator&&navigator.wakeLock),ne),oe=async()=>{const e=re();if(e)try{return await e.request("screen")}catch(e){console.warn(e)}return null},ae=async()=>{if(!re())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&oe()};for(const e of["visibilitychange","fullscreenchange"])document.addEventListener(e,t);return e=await oe(),e};((t=document.getElementById("p"))=>{(()=>{const t=l("view");e.dataset.bespokeView=t===r||t===n?t:""})();const a=(e=>{const t=l(e);return d({[e]:void 0}),t})("sync")||void 0;var i,c,u,f,m,g,h,y,b,w,E,T;i=t,c=((...e)=>{const t=o.findIndex((e=>s()===e));return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[1,1,0],W({key:a})],[[1,1,1],V(t)],[[1,1,0],L],[[1,1,1],p],[[1,0,0],k()],[[1,1,1],$],[[1,1,1],H({history:!1})],[[1,1,0],S()],[[1,1,0],x],[[1,0,0],R],[[1,1,0],Z()],[[1,0,0],P()],[[1,0,0],te],[[1,1,1],v],[[1,1,0],ae]),f=1===(i.parent||i).nodeType?i.parent||i:document.querySelector(i.parent||i),m=[].filter.call("string"==typeof i.slides?f.querySelectorAll(i.slides):i.slides||f.children,(function(e){return"SCRIPT"!==e.nodeName})),g={},h=function(e,t){return(t=t||{}).index=m.indexOf(e),t.slide=e,t},w=function(e,t){m[e]&&(u&&b("deactivate",h(u,t)),u=m[e],b("activate",h(u,t)))},E=function(e,t){var n=m.indexOf(u)+e;b(e>0?"next":"prev",h(u,t))&&w(n,t)},T={off:y=function(e,t){g[e]=(g[e]||[]).filter((function(e){return e!==t}))},on:function(e,t){return(g[e]||(g[e]=[])).push(t),y.bind(null,e,t)},fire:b=function(e,t){return(g[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},slide:function(e,t){if(!arguments.length)return m.indexOf(u);b("slide",h(m[e],t))&&w(e,t)},next:E.bind(null,1),prev:E.bind(null,-1),parent:f,slides:m,destroy:function(e){b("destroy",h(u,e)),g={}}},(c||[]).forEach((function(e){e(T)})),u||w(0)})()}();</script></body></html>