Repository navigation
Expand file tree
/
Copy pathicon-structured-slides.html
More file actions
606 lines (599 loc) · 115 KB
/
Copy pathicon-structured-slides.html
File metadata and controls
606 lines (599 loc) · 115 KB
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
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
<!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;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+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNNDAgNzBIMjBWNTBtMjAgMEwyMCA3MG00MC00MGgyMHYyMG0tMjAgMCAyMC0yMCIgY2xhc3M9ImEiLz48L3N2Zz4=") 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+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNMjAgNTBoMjB2MjBtLTIwIDAgMjAtMjBtNDAgMEg2MFYzMG0yMCAwTDYwIDUwIiBjbGFzcz0iYSIvPjwvc3ZnPg==")}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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNODcuOCA0Ny41Qzg5IDUwIDg3LjcgNTIgODUgNTJIMzVhOC43IDguNyAwIDAgMS03LjItNC41bC0xNS42LTMxQzExIDE0IDEyLjIgMTIgMTUgMTJoNTBhOC44IDguOCAwIDAgMSA3LjIgNC41ek02MCA1MnYzNm0tMTAgMGgyME00NSA0MmgyMCIvPjwvc3ZnPg==") 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODBNNTIgOTBWMTAiLz48L3N2Zz4=") 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}@keyframes __bespoke_marp_transition_reduced_outgoing__{0%{opacity:1}to{opacity:0}}@keyframes __bespoke_marp_transition_reduced_incoming__{0%{mix-blend-mode:plus-lighter;opacity:0}to{mix-blend-mode:plus-lighter;opacity:1}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{::view-transition-group(*){animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-timing-function:ease}::view-transition-new(*),::view-transition-old(*){animation-delay:0s;animation-direction:var(--marp-bespoke-transition-animation-direction,normal);animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-fill-mode:both;animation-name:var(--marp-bespoke-transition-animation-name,var(--marp-bespoke-transition-animation-name-fallback,__bespoke_marp_transition_no_animation__));mix-blend-mode:normal}::view-transition-old(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_outgoing__;animation-timing-function:ease}::view-transition-new(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_incoming__;animation-timing-function:ease}::view-transition-new(root),::view-transition-old(root){animation-timing-function:linear}::view-transition-new(__bespoke_marp_transition_osc__),::view-transition-old(__bespoke_marp_transition_osc__){animation-duration:0s!important;animation-name:__bespoke_marp_transition_osc__!important}::view-transition-new(__bespoke_marp_transition_osc__){opacity:0!important}.bespoke-marp-transition-warming-up::view-transition-group(*),.bespoke-marp-transition-warming-up::view-transition-new(*),.bespoke-marp-transition-warming-up::view-transition-old(*){animation-play-state:paused!important}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:not(.bespoke-marp-active) *{view-transition-name:none!important}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 *{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}}}@media screen and (prefers-reduced-motion:reduce){svg.bespoke-marp-slide *{view-transition-name:none!important}}@media screen{[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{inset:0;position:absolute}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{view-transition-name:__bespoke_marp_transition_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;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;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;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{display:block;inset:0;position:absolute}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>@charset "UTF-8";@import "https://fonts.bunny.net/css?family=Lato:400,900|Roboto+Mono:400,700&display=swap";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 :is(h1,marp-h1){font-size:2em;margin:0.67em 0}div#\:\$p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1920px 1080px;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}}
/*!
* Marp / Marpit Gaia theme.
*
* @theme gaia
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#\:\$p>svg>foreignObject>section :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section .hljs{background:#000;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-comment,div#\:\$p>svg>foreignObject>section .hljs-quote{color:#aeaeae;font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-keyword,div#\:\$p>svg>foreignObject>section .hljs-selector-tag,div#\:\$p>svg>foreignObject>section .hljs-type{color:#e28964}div#\:\$p>svg>foreignObject>section .hljs-string{color:#65b042}div#\:\$p>svg>foreignObject>section .hljs-subst{color:#daefa3}div#\:\$p>svg>foreignObject>section .hljs-link,div#\:\$p>svg>foreignObject>section .hljs-regexp{color:#e9c062}div#\:\$p>svg>foreignObject>section .hljs-name,div#\:\$p>svg>foreignObject>section .hljs-section,div#\:\$p>svg>foreignObject>section .hljs-tag,div#\:\$p>svg>foreignObject>section .hljs-title{color:#89bdff}div#\:\$p>svg>foreignObject>section .hljs-class .hljs-title,div#\:\$p>svg>foreignObject>section .hljs-doctag,div#\:\$p>svg>foreignObject>section .hljs-title.class_{text-decoration:underline}div#\:\$p>svg>foreignObject>section .hljs-bullet,div#\:\$p>svg>foreignObject>section .hljs-number,div#\:\$p>svg>foreignObject>section .hljs-symbol{color:#3387cc}div#\:\$p>svg>foreignObject>section .hljs-params,div#\:\$p>svg>foreignObject>section .hljs-template-variable,div#\:\$p>svg>foreignObject>section .hljs-variable{color:#3e87e3}div#\:\$p>svg>foreignObject>section .hljs-attribute{color:#cda869}div#\:\$p>svg>foreignObject>section .hljs-meta{color:#8996a8}div#\:\$p>svg>foreignObject>section .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-addition{background-color:#253b22;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-deletion{background-color:#420e09;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-selector-class{color:#9b703f}div#\:\$p>svg>foreignObject>section .hljs-selector-id{color:#8b98ab}div#\:\$p>svg>foreignObject>section .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-strong{font-weight:700}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){margin:.5em 0 0}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{font-weight:inherit}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6)::part(auto-scaling){max-height:580px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:1.8em}div#\:\$p>svg>foreignObject>section :is(h2,marp-h2){font-size:1.5em}div#\:\$p>svg>foreignObject>section :is(h3,marp-h3){font-size:1.3em}div#\:\$p>svg>foreignObject>section :is(h4,marp-h4){font-size:1.1em}div#\:\$p>svg>foreignObject>section :is(h5,marp-h5){font-size:1em}div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){font-size:.9em}div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section p{margin:1em 0 0}div#\:\$p>svg>foreignObject>section ol>li,div#\:\$p>svg>foreignObject>section ul>li{margin:.3em 0 0}div#\:\$p>svg>foreignObject>section ol>li>p,div#\:\$p>svg>foreignObject>section ul>li>p{margin:.6em 0 0}div#\:\$p>svg>foreignObject>section code{display:inline-block;font-family:Roboto Mono,monospace;font-size:.8em;letter-spacing:0;margin:-.1em .15em;padding:.1em .2em;vertical-align:baseline}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){display:block;margin:1em 0 0;overflow:visible}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre) code{box-sizing:border-box;font-size:.7em;margin:0;min-width:100%;padding:.5em}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)::part(auto-scaling){max-height:calc(580px - 1em)}div#\:\$p>svg>foreignObject>section blockquote{margin:1em 0 0;padding:0 1em;position:relative}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before{content:"“";display:block;font-family:Times New Roman,serif;font-weight:700;position:absolute}div#\:\$p>svg>foreignObject>section blockquote:before{left:0;top:0}div#\:\$p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#\:\$p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#\:\$p>svg>foreignObject>section mark{background:transparent}div#\:\$p>svg>foreignObject>section table{border-collapse:collapse;border-spacing:0;margin:1em 0 0}div#\:\$p>svg>foreignObject>section table td,div#\:\$p>svg>foreignObject>section table th{border-style:solid;border-width:1px;padding:.2em .4em}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header,div#\:\$p>svg>foreignObject>section:after{box-sizing:border-box;font-size:66%;height:70px;line-height:50px;overflow:hidden;padding:10px 25px;position:absolute}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:66%}div#\:\$p>svg>foreignObject>section header{top:0}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header{left:0;right:0}div#\:\$p>svg>foreignObject>section footer{bottom:0}div#\:\$p>svg>foreignObject>section{word-wrap:break-word;--color-background:#fff8e1;--color-background-stripe:rgba(69,90,100,.1);--color-foreground:#455a64;--color-dimmed:#6a7a7d;--color-highlight:#0288d1;background-color:var(--color-background);background-image:linear-gradient(135deg,hsla(0,0%,53%,0),hsla(0,0%,53%,.02) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05));color:var(--color-foreground);font-family:Lato,Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;font-size:35px;height:720px;letter-spacing:1.25px;line-height:1.35;padding:70px;width:1280px}div#\:\$p>svg>foreignObject>section{--marpit-root-font-size:35px}div#\:\$p>svg>foreignObject>section:after{bottom:0;font-size:80%;right:0}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:80%}div#\:\$p>svg>foreignObject>section a,div#\:\$p>svg>foreignObject>section mark{color:var(--color-highlight)}div#\:\$p>svg>foreignObject>section code{background:var(--color-dimmed);color:var(--color-background)}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{color:var(--color-highlight)}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){background:var(--color-foreground)}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)>code{background:transparent}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before,div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header,div#\:\$p>svg>foreignObject>section section:after{color:var(--color-dimmed)}div#\:\$p>svg>foreignObject>section table td,div#\:\$p>svg>foreignObject>section table th{border-color:var(--color-foreground)}div#\:\$p>svg>foreignObject>section table thead th{background:var(--color-foreground);color:var(--color-background)}div#\:\$p>svg>foreignObject>section table tbody>tr:nth-child(odd) td,div#\:\$p>svg>foreignObject>section table tbody>tr:nth-child(odd) th{background:var(--color-background-stripe,transparent)}div#\:\$p>svg>foreignObject>section>:first-child,div#\:\$p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#\:\$p>svg>foreignObject>section:where(.invert){--color-background:#455a64;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#dad8c8;--color-highlight:#81d4fa}div#\:\$p>svg>foreignObject>section:where(.gaia){--color-background:#0288d1;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#cce2de;--color-highlight:#81d4fa}div#\:\$p>svg>foreignObject>section:where(.lead){display:flex;flex-flow:column nowrap;justify-content:center}div#\:\$p>svg>foreignObject>section:where(.lead) :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h6,marp-h6){text-align:center}div#\:\$p>svg>foreignObject>section:where(.lead) p{text-align:center}div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h1,marp-h1),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h2,marp-h2),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h3,marp-h3),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h4,marp-h4),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h5,marp-h5),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h6,marp-h6),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>p{text-align:left}div#\:\$p>svg>foreignObject>section:where(.lead) ol>li>p,div#\:\$p>svg>foreignObject>section:where(.lead) ul>li>p{text-align:left}div#\:\$p>svg>foreignObject>section:where(.lead) table{margin-left:auto;margin-right:auto}div#\:\$p>svg>foreignObject>:where(section){container-type:size}div#\:\$p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}@use 'sass:color';
/*!
* Marp / Marpit Custom CSCS theme.
*
* @theme cscs
* @author Prashanth
*
* @auto-scaling fittingHeader,math
* @size 16:9 1920px 1080px
* @size 4:3 1440px 1080px
* @size 4K 3840px 2160px
*/div#\:\$p>svg>foreignObject>section footer{position:fixed;padding-bottom:65px;left:0;right:0;width:fit-content}div#\:\$p>svg>foreignObject>section.titlecover :is(h1,marp-h1){text-align:left;color:#000;padding-top:600px}div#\:\$p>svg>foreignObject>section .twocolumns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section:after{margin-bottom:10px;width:100%;text-align:center}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre),div#\:\$p>svg>foreignObject>section code{color:black;background-color:#EEEEEE;font-size:32px}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){margin:10px solid black;border:1px solid black}
/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/div#\:\$p>svg>foreignObject>section .hljs{color:#24292e;background:#ffffff}div#\:\$p>svg>foreignObject>section .hljs-doctag,div#\:\$p>svg>foreignObject>section .hljs-keyword,div#\:\$p>svg>foreignObject>section .hljs-meta .hljs-keyword,div#\:\$p>svg>foreignObject>section .hljs-template-tag,div#\:\$p>svg>foreignObject>section .hljs-template-variable,div#\:\$p>svg>foreignObject>section .hljs-type,div#\:\$p>svg>foreignObject>section .hljs-variable.language_{
/* prettylights-syntax-keyword */color:#d73a49}div#\:\$p>svg>foreignObject>section .hljs-title,div#\:\$p>svg>foreignObject>section .hljs-title.class_,div#\:\$p>svg>foreignObject>section .hljs-title.class_.inherited__,div#\:\$p>svg>foreignObject>section .hljs-title.function_{
/* prettylights-syntax-entity */color:#6f42c1}div#\:\$p>svg>foreignObject>section .hljs-attr,div#\:\$p>svg>foreignObject>section .hljs-attribute,div#\:\$p>svg>foreignObject>section .hljs-literal,div#\:\$p>svg>foreignObject>section .hljs-meta,div#\:\$p>svg>foreignObject>section .hljs-number,div#\:\$p>svg>foreignObject>section .hljs-operator,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-variable{
/* prettylights-syntax-constant */color:#005cc5}div#\:\$p>svg>foreignObject>section .hljs-meta .hljs-string,div#\:\$p>svg>foreignObject>section .hljs-regexp,div#\:\$p>svg>foreignObject>section .hljs-string{
/* prettylights-syntax-string */color:#032f62}div#\:\$p>svg>foreignObject>section .hljs-built_in,div#\:\$p>svg>foreignObject>section .hljs-symbol{
/* prettylights-syntax-variable */color:#e36209}div#\:\$p>svg>foreignObject>section .hljs-code,div#\:\$p>svg>foreignObject>section .hljs-comment,div#\:\$p>svg>foreignObject>section .hljs-formula{
/* prettylights-syntax-comment */color:#6a737d}div#\:\$p>svg>foreignObject>section .hljs-name,div#\:\$p>svg>foreignObject>section .hljs-quote,div#\:\$p>svg>foreignObject>section .hljs-selector-pseudo,div#\:\$p>svg>foreignObject>section .hljs-selector-tag{
/* prettylights-syntax-entity-tag */color:#22863a}div#\:\$p>svg>foreignObject>section .hljs-subst{
/* prettylights-syntax-storage-modifier-import */color:#24292e}div#\:\$p>svg>foreignObject>section .hljs-section{
/* prettylights-syntax-markup-heading */color:#005cc5;font-weight:bold}div#\:\$p>svg>foreignObject>section .hljs-bullet{
/* prettylights-syntax-markup-list */color:#735c0f}div#\:\$p>svg>foreignObject>section .hljs-emphasis{
/* prettylights-syntax-markup-italic */color:#24292e;font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-strong{
/* prettylights-syntax-markup-bold */color:#24292e;font-weight:bold}div#\:\$p>svg>foreignObject>section .hljs-addition{
/* prettylights-syntax-markup-inserted */color:#22863a;background-color:#f0fff4}div#\:\$p>svg>foreignObject>section .hljs-deletion{
/* prettylights-syntax-markup-deleted */color:#b31d28;background-color:#ffeef0}div#\:\$p>svg>foreignObject>section .hljs-char.escape_,div#\:\$p>svg>foreignObject>section .hljs-link,div#\:\$p>svg>foreignObject>section .hljs-params,div#\:\$p>svg>foreignObject>section .hljs-property,div#\:\$p>svg>foreignObject>section .hljs-punctuation,div#\:\$p>svg>foreignObject>section .hljs-tag{
/* purposely ignored */}
/* @theme u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle */div#\:\$p>svg>foreignObject>section{width:1920px;height:1080px}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=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}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 1920 1080"><foreignObject width="1920" height="1080"><section data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="--paginate:skip;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--class:titlecover;--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-size="16:9" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("slides-support/common/title-bg3.png");background-size:cover;"></figure></div></section></foreignObject><foreignObject width="1920" height="1080"><section id="1" data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="--paginate:skip;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--class:titlecover;--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-size="16:9" data-marpit-advanced-background="content">
<h1 id="icon-structured-grid-benchmark">ICON structured grid benchmark</h1>
<h3 id="cscs">CSCS</h3>
</section>
</foreignObject><foreignObject width="1920" height="1080" data-marpit-advanced-background="pseudo"><section data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="" data-size="16:9" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="2" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="1" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h1 id="introduction">Introduction</h1>
<h2 id="motivation">Motivation</h2>
<div class="twocolumns">
<div>
<ul>
<li>ICON grid is partly structured</li>
<li>Investigate how expensive are indirect neighbor accesses compared to strided indexes of neighbors</li>
<li>Investigate optimizations based on strided indexes</li>
<li>Apply optimizations to current and future <code>GT4Py</code> development</li>
</ul>
</div>
<div>
<img src="slides-images/icon_grid.png" style="width: 80%" align="right" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="3" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="2" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h1 id="icon-grid-handling">ICON grid handling</h1>
<h2 id="icon-grid-input">ICON grid input</h2>
<ul>
<li><code>netcdf</code> file with neighbor lists</li>
<li>Use of structured torus grid
<ul>
<li>Generated using <a href="https://gitlab.dkrz.de/mpim-sw/grid-generator">grid-generator</a> from <code>DKRZ</code> by <strong>David Strassman</strong></li>
<li>Read using <a href="https://github.com/C2SM/icon4py/blob/main/model/common/src/icon4py/model/common/grid/grid_manager.py">icon4py GridManager</a></li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="4" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="3" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="manipulation-of-icon-grid">Manipulation of ICON grid</h2>
<div class="twocolumns">
<div>
<h3 id="torus-grid-characteristics">Torus grid characteristics</h3>
<ul>
<li>Torus grid has periodic boundaries
<ul>
<li>Adds complexity to compute strided indexes</li>
<li>Not applicable in production scenario of CH</li>
</ul>
</li>
</ul>
</div>
<div>
<img src="slides-images/full_torus.png" style="width: 98%" align="right" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="5" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="4" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="manipulation-of-icon-grid-1">Manipulation of ICON grid</h2>
<div class="twocolumns">
<div>
<h3 id="selection-of-computation-domain">Selection of computation domain</h3>
<ul>
<li>Filter torus grid to end up with a cartesian grid with 2 level halo
<ul>
<li>1 would also be sufficient</li>
<li>Discard periodic edges</li>
</ul>
</li>
<li>Calculate <code>X</code> and <code>Y</code> dimensions based on the distribution of vertices in space
<ul>
<li><code>x_dim</code> equals the number of vertices with <code>y == 0</code></li>
</ul>
</li>
</ul>
<h3 id="computation-domain-in-span-stylecolorredredspan">Computation domain in <span style="color:red">red</span></h3>
</div>
<div>
<img src="slides-images/torus_computation_domain.png" style="width: 98%" align="right" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="6" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="5" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="manipulation-of-icon-grid-2">Manipulation of ICON grid</h2>
<h3 id="organization-of-edges-in-memory">Organization of edges in memory</h3>
<div class="twocolumns">
<div>
<img src="slides-images/per-vertex.svg" style="width: 100%" align="center" />
</div>
<div>
<img src="slides-images/per-orientation.svg" style="width: 100%" align="center" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="7" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="6" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="manipulation-of-icon-grid-3">Manipulation of ICON grid</h2>
<div class="twocolumns">
<div>
<h3 id="selection-of-computation-domain-1">Selection of computation domain</h3>
<ul>
<li>Fix <code>e2v</code> ordering of edges read by torus grid file to be by default <code>per-vertex</code> in <a href="https://github.com/iomaganaris/icon4py/blob/0f861306c65e135345aac534a5e0283de6e8554e/model/common/src/icon4py/model/common/grid/grid_manager.py#L499">GridManager</a>
<ul>
<li>Some elements in <code>e2v</code> didn't follow this ordering by default</li>
</ul>
</li>
<li>Select between <code>per-vertex</code> and <code>per-orientation</code> ordering in <a href="https://github.com/iomaganaris/icon4py/blob/0f861306c65e135345aac534a5e0283de6e8554e/model/common/src/icon4py/model/common/grid/grid_manager.py#L500">GridManager</a></li>
<li>Filter halo vertices and edges in <a href="https://github.com/GridTools/icon_structured_benchmark/blob/main/run_filtered_torus_grid_int_nabla4_interpolate.py#L74">benchmark python script</a></li>
</ul>
<h3 id="computation-domain-in-span-stylecolorredredspan-1">Computation domain in <span style="color:red">red</span></h3>
</div>
<div>
<img src="slides-images/torus_computation_domain.png" style="width: 98%" align="right" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="8" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="7" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="selected-kernels-for-exploration">Selected kernels for exploration</h2>
<ul>
<li><a href="https://github.com/C2SM/icon4py/blob/a32640c8bacc65bbafe41ec9a68b772c7a3c1853/model/atmosphere/diffusion/src/icon4py/model/atmosphere/diffusion/stencils/calculate_nabla4.py#L23">Nabla4</a>
<ul>
<li>Neighbor tables
<ul>
<li><strong>e2c2v[4]</strong></li>
<li><strong>e2ecv[4]</strong></li>
</ul>
</li>
<li>Input fields
<ul>
<li><strong>u_vert[<span style="color:SandyBrown">VertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>v_vert[<span style="color:SandyBrown">VertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>primal_normal_vert_v1[<span style="color:DarkGreen">EdgeDim</span> * <span style="color:Tan">ECVDim</span>]</strong></li>
<li><strong>primal_normal_vert_v2[<span style="color:DarkGreen">EdgeDim</span> * <span style="color:Tan">ECVDim</span>]</strong></li>
<li><strong>z_nabla2_e[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>inv_vert_vert_length[<span style="color:OliveDrab">OutputEdgeDim</span>]</strong></li>
<li><strong>inv_primal_edge_length[<span style="color:OliveDrab">OutputEdgeDim</span>]</strong></li>
</ul>
</li>
<li>Output field
<ul>
<li><strong>z_nabla4_e2[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:blue">KDim</span>]</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="9" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="8" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="selected-kernels-for-exploration-1">Selected kernels for exploration</h2>
<ul>
<li>Nabla4 vertical (artificial)
<ul>
<li>Similar to <code>nabla4</code> but all input fields are vertical</li>
<li>Neighbor tables
<ul>
<li><strong>e2c2v[4]</strong></li>
<li><strong>e2ecv[4]</strong></li>
</ul>
</li>
<li>Input fields
<ul>
<li><strong>u_vert[<span style="color:SandyBrown">VertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>v_vert[<span style="color:SandyBrown">VertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>primal_normal_vert_v1[<span style="color:DarkGreen">EdgeDim</span> * <span style="color:Tan">ECVDim</span>, <span style="color:DeepSkyBlue">KDim</span>]</strong></li>
<li><strong>primal_normal_vert_v2[<span style="color:DarkGreen">EdgeDim</span> * <span style="color:Tan">ECVDim</span>, <span style="color:DeepSkyBlue">KDim</span>]</strong></li>
<li><strong>z_nabla2_e[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>inv_vert_vert_length[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:DeepSkyBlue">KDim</span>]</strong></li>
<li><strong>inv_primal_edge_length[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:DeepSkyBlue">KDim</span>]</strong></li>
</ul>
</li>
<li>Output field
<ul>
<li><strong>z_nabla4_e2[<span style="color:OliveDrab">OutputEdgeDim</span>, <span style="color:blue">KDim</span>]</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="10" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="9" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="selected-kernels-for-exploration-2">Selected kernels for exploration</h2>
<ul>
<li><a href="https://github.com/C2SM/icon4py/blob/main/model/common/src/icon4py/model/common/interpolation/stencils/mo_intp_rbf_rbf_vec_interpol_vertex.py#L19">Interpolate</a>
<ul>
<li>
<ul>
<li>Neighbor tables</li>
<li><strong>v2e[6]</strong></li>
</ul>
</li>
<li>Input fields
<ul>
<li><strong>p_e_in[<span style="color:DarkGreen">EdgeDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>ptr_coeff_1[<span style="color:BurlyWood">OutputVertexDim</span>, 6]</strong></li>
<li><strong>ptr_coeff_2[<span style="color:BurlyWood">OutputVertexDim</span>, 6]</strong></li>
</ul>
</li>
<li>Output fields
<ul>
<li><strong>p_u_out[<span style="color:BurlyWood">OutputVertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
<li><strong>p_v_out[<span style="color:BurlyWood">OutputVertexDim</span>, <span style="color:blue">KDim</span>]</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="11" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="10" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="nabla4-execution">Nabla4 execution</h2>
<div style="text-align: center;">
<img src="slides-images/nabla4_0.svg" style="width: 86%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="12" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="11" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="nabla4-execution-1">Nabla4 execution</h2>
<div style="text-align: center;">
<img src="slides-images/nabla4_1.svg" style="width: 86%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="13" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="12" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="interpolate-execution">Interpolate execution</h2>
<div style="text-align: center;">
<img src="slides-images/interpolate_0.svg" style="width: 86%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="14" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="13" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="nabla4--interpolate-inlined-v2ee2c2v-execution">Nabla4 & Interpolate inlined v2e[e2c2v] execution</h2>
<div style="text-align: center;">
<img src="slides-images/nabla4_interpolate_inlined.svg" style="width: 86%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="15" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="14" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="nabla4--interpolate-inlined-v2e2c2v-execution">Nabla4 & Interpolate inlined v2e2c2v execution</h2>
<div style="text-align: center;">
<img src="slides-images/nabla4_interpolate_inlined_v2v.svg" style="width: 86%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="16" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="15" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="kernel-implementations">Kernel implementations</h2>
<ul>
<li>Neighbor accesses
<ul>
<li>Indirect
<ul>
<li>Indirect accesses via neighbor tables</li>
</ul>
</li>
<li>Strided
<ul>
<li>Neighbor accesses via strides</li>
</ul>
</li>
</ul>
</li>
<li>Iteration strategies
<ul>
<li><code>gpu_naive</code>
<ul>
<li>Default iteration strategy in <code>GridTools C++</code></li>
<li>One GPU thread calculates 1 element in horizontal and vertical axis</li>
</ul>
</li>
<li><code>gpu_kloop</code>
<ul>
<li>Optional iteration strategy in <code>GridTools C++</code></li>
<li>One GPU thread calculates 1 element in horizontal axis but multiple vertical levels</li>
<li>Save neighbors and vertically independent fields in registers and iterate over multiple vertical fields</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="17" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="16" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="kernel-implementations-1">Kernel implementations</h2>
<div class="twocolumns">
<div>
<ul>
<li>Separate
<ul>
<li>Execute <code>nabla4</code> kernel and then <code>interpolate</code></li>
</ul>
</li>
<li>Inlined
<ul>
<li>Compute <code>nabla4</code> output for every input of <code>interpolate</code> kernel</li>
<li>More computations</li>
<li>Less writes to device memory</li>
</ul>
</li>
<li>Inlined v2v (<code>indirect</code> only)
<ul>
<li>Compress <code>v2e[e2c2v]</code> neighbor accesses to <code>v2e2c2v</code>
<ul>
<li>Read fields for 7 vertices instead of (6*4=) 24 vertices</li>
</ul>
</li>
<li>Assumes certain order of vertices in <code>e2c2v</code> and edges in <code>v2e</code></li>
</ul>
</li>
</ul>
</div>
<div style="text-align: left;">
<img src="slides-images/nabla4_interpolate.svg" style="width: 110%" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="18" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="17" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="kernel-implementations-2">Kernel implementations</h2>
<div class="twocolumns">
<div>
<ul>
<li>Inlined_cached
<ul>
<li>Save <code>nabla4</code> output in shared memory and then use it in <code>interpolate</code> kernel</li>
<li>Reduces overcomputations compared to <code>inlined</code> implementation</li>
</ul>
</li>
</ul>
</div>
<div style="text-align: left;">
<img src="slides-images/nabla4_interpolate.svg" style="width: 110%" />
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="19" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="18" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="kernel-implementations-3">Kernel implementations</h2>
<ul>
<li><code>gtfn</code>
<ul>
<li>Only <code>indirect</code></li>
<li>Based on <code>GridTools C++</code></li>
<li>Improved <code>GridTools C++</code>
<ul>
<li>Memory loads via <code>__ldg</code></li>
<li><code>gpu_kloop</code> option</li>
<li><code>const</code> neighbor tables and input fields</li>
<li>Kudos to <strong>Felix Thaler</strong></li>
</ul>
</li>
</ul>
</li>
<li><code>CUDA</code>
<ul>
<li>Plain cuda kernels</li>
<li>Launched by python script</li>
<li>Random input in benchmarks</li>
<li>Validated kernels with serialized data from <code>GT4Py</code></li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="20" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="19" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="general-kernel-optimizations">General kernel optimizations</h2>
<ul>
<li>Occupancy
<ul>
<li>All kernels have been optimized for best occupancy</li>
</ul>
</li>
<li><code>__launch_bounds__</code> and <code>__maxnreg__</code>
<ul>
<li>Launch bounds are applied to all kernels except some that were performing better with register limitation to a certain number of registers</li>
</ul>
</li>
<li>Thread Block size
<ul>
<li>Specifically for <code>gpu_naive</code> implementations, increasing the vertical axis thread block size (<code>ThreadBlockDim.y/z</code>) was beneficial since there are more chances to find neighbor tables and vertically independent fields in cache</li>
<li>4-8-9 most used number with 80 vertical levels in total. For some kernels 12 or 16</li>
</ul>
</li>
<li><code>gpu_kloop</code>
<ul>
<li>For this implementation vertical <code>GridDim</code> is set to 1. Iteration number is controlled by <code>ThreadBlockDim.y/z</code> and <code>KDim</code>. Exceptions are the <code>inline_cached</code> versions where the shared memory size is limiting the number of iterations possible</li>
<li>Optimized number of iterations per kernel. 5-40 iterations. 8-20 usually have the best performance</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="21" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="20" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="notes-for-specific-kernels">Notes for specific kernels</h2>
<ul>
<li><code>strided_gpu_{naive,kloop}_inlined_cached</code>: Tried 2 different implementations, number of threads same as input but then deactivate for the output some of them and number of threads same as output where each thread caclulates multiple elements. Former is better</li>
<li><code>strided_*_inlined</code>: calculate only necessary indexes, similar to <code>v2e2c2v</code></li>
<li><code>indirect_*_inlined_v2v</code>: pass <code>v2e2c2v</code> as input</li>
<li><code>indirect</code>: <code>nabla4</code> iterates on edges (<code>per-orientation</code> - 1 edge per thread)</li>
<li><code>strided</code>: <code>nabla4</code> iterates on vertices (<code>per-vertex</code> - 3 edges per vertex/thread)</li>
<li>Both <code>strided</code> and <code>indirect</code> versions operate on data with same ordering in memory
<ul>
<li>No SFC. Vertices are ordered per <code>i</code> and <code>j</code> coordinates and <code>edges</code> per <code>orientation/vertices</code></li>
</ul>
</li>
<li><code>strided</code>: <code>e2ecv</code> is also computed</li>
<li>Smaller grids benefit by more threads and less <code>k level</code> iterations</li>
<li>Loop in <code>k</code> is done with stride <code>blockDim.y/z * gridDim.y/z</code>
<ul>
<li>It would be more beneficial for kernels that read data from adjacent <code>k</code> levels to do the looping with stride <code>1</code> in each thread
<ul>
<li>Current implementation in <code>gtfn</code>, not on the <code>CUDA</code> kernels since we don't evaluate such case</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="22" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="21" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="results">Results</h2>
<ul>
<li><code>GH200</code> GPU</li>
<li>Median runtime presented
<ul>
<li>10 dry runs (not taken into account)</li>
<li>101 runs to select median</li>
</ul>
</li>
<li>229758 edges
<ul>
<li>Close to the amount of edges that fit in a single GPU for ICON runs</li>
</ul>
</li>
<li>915948 edges
<ul>
<li>For exploration</li>
</ul>
</li>
<li>Commit <a href="https://github.com/GridTools/icon_structured_benchmark/commit/979c2b9b001348dbdcf97ed2bbddd2bae3e6053d">979c2b9</a></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="23" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="22" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="gtfn-improvements">gtfn improvements</h2>
<div style="text-align: center;">
<img src="slides-images/runtimes_torus_accel_gtfn_128_80.png" style="width: 62%;" />
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="24" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="23" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<div class="twocolumns">
<div style="text-align: center;">
<img src="slides-images/runtimes_torus_accel_nabla4_inter_256_80_v3.png" style="width: 133%" />
</div>
<div style="margin-left: 320px;">
<ul>
<li><code>strided</code> <code>separate</code> kernels <strong>~10%</strong> speed up</li>
<li>Inlining in <code>gpu_naive</code> doesn't help without extra optimizations due to overcomputations</li>
<li><code>cached</code> approach in <code>gpu_naive</code> another <strong>~20%</strong> speedup</li>
<li><code>gpu_kloop</code> <strong>~10-20%</strong> speedup compared to <code>gpu_naive</code> for <code>separate</code> kernels</li>
<li><code>indirect</code> <code>gpu_kloop</code> <code>inlined_v2v</code> and <code>strided</code> <code>gpu_kloop</code> <code>inlined</code> <strong>~2x</strong> faster</li>
<li><code>cached</code> implementation not fastest in <code>gpu_kloop</code></li>
</ul>
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="25" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="24" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9"><div class="twocolumns">
<div style="text-align: center;">
<img src="slides-images/runtimes_torus_accel_nabla4_vertical_inter_256_80_v3.png" style="width: 133%" />
</div>
<div style="margin-left: 320px;">
<ul>
<li><code>gpu_kloop</code> not always beneficial since there are no vertical fields to save to registers
<ul>
<li>Only neighbors are saved in registers which are either loaded from memory or computed</li>
</ul>
</li>
<li><code>strided</code> <code>gpu_kloop</code> <code>inlined_cached</code> not better than more expensive overcomputations for other <code>inlined</code> implementations</li>
</ul>
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="26" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="25" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="conclusions">Conclusions</h2>
<ul>
<li>For <code>separate</code> kernels <code>strided</code> is faster than <code>indirect</code> by <strong>8-10%</strong></li>
<li>For <code>nabla4_interpolate</code> where there are vertically independent fields <code>gpu_kloop</code> is beneficial
<ul>
<li>For <code>nabla4_vertical_interpolate</code> where there aren't many vertically independent fields <code>gpu_kloop</code> is not necessaarily beneficial due to more register usage and lower occupancy</li>
</ul>
</li>
<li><code>strided</code> is only slightly faster than <code>indirect</code> <code>inlined_v2v</code> in <code>nabla4_interpolate</code> but much faster than <code>indirect</code>
<ul>
<li>In <code>nabla4_vertical_interpolate</code> performance is different
<ul>
<li>Probably should understand it better but since <code>strided_inlined_cached</code> is not faster than <code>strided_inlined</code> maybe not worth it</li>
</ul>
</li>
</ul>
</li>
<li><code>inlined_cached</code> using shared memory is not better than overcomputations/loading from memory for <code>inlined</code> version in <code>strided</code> implementations
<ul>
<li>Potentially room for improvement there</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="27" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="26" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="next-steps">Next steps</h2>
<ul>
<li>Add interpolation stencil with <code>c2v</code> neighbor to see implact in <code>inlined</code> versions due to overcomputations
<ul>
<li><code>c2v</code> neighbor will require computing 3 vertices per cell = 3 times the computations</li>
<li>Try <code>c2v2e2c2v</code> compressed neighbor in <code>indirect</code> version as well</li>
</ul>
</li>
<li>Try <code>cached</code> approach for <code>indirect</code> implementation
<ul>
<li>Compute border coordinates for each Thread Block (should be the same as <code>strided</code> for our grid)
<ul>
<li><code>per-vertex</code> ordering should be better due to smaller range of vertices/edges that need to be saved to shared memory</li>
</ul>
</li>
<li>Load them to shared memory</li>
</ul>
</li>
<li>Try <code>TMA</code> implementation
<ul>
<li>Tried <code>cuda::pipeline</code> to use <code>LDGSTS</code>/<code>LDGSTS.BYPASS</code> instructions for loading the input fields of <code>nabla4</code> kernel
<ul>
<li>Big slowdown</li>
<li>Probably because computations are not enough to hide memory latencies</li>
</ul>
</li>
<li>Try with <code>TMA</code> to see if it improves</li>
<li>More complex due to memory alignment requirements</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="28" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="27" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h2 id="next-steps-1">Next steps</h2>
<ul>
<li>Compile time strides
<ul>
<li><code>x_dim</code> is necessary to calculate the strides in <code>strided</code> version
<ul>
<li>Can be given in case of JIT compilation</li>
</ul>
</li>
</ul>
</li>
<li>Use cache hints for loads and non temporal stores</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="--paginate:skip;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--class:titlecover;--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-size="16:9" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("slides-support/common/title-bg2.png");background-size:cover;"></figure></div></section></foreignObject><foreignObject width="1920" height="1080"><section id="29" data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="--paginate:skip;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--class:titlecover;--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-size="16:9" data-marpit-advanced-background="content">
<h1 id="questions">Questions?</h1>
</section>
</foreignObject><foreignObject width="1920" height="1080" data-marpit-advanced-background="pseudo"><section data-paginate="skip" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-class="titlecover" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" class="titlecover" style="" data-size="16:9" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1920 1080"><foreignObject width="1920" height="1080"><section id="30" data-paginate="true" data-background-color="#fff" data-background-image="url('slides-support/common/4k-slide-bg-white.png')" data-theme="u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle" lang="en-US" data-marpit-pagination="28" style="--paginate:true;--background-color:#fff;--background-image:url('slides-support/common/4k-slide-bg-white.png');--theme:u7r1f7my8acm9wzzcmwdcb42guynsszeaodm6o9grle;background-color:#fff;background-image:url('slides-support/common/4k-slide-bg-white.png');background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="28" data-size="16:9">
<h1 id="resources">Resources</h1>
<ul>
<li><a href="https://github.com/GridTools/icon_structured_benchmark">GitHub Repository</a></li>
</ul>
</section>
<script>!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class s extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(((...e)=>{t("wrapperSize")(...e),this.flushSvgDisplay()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,s,o,r,a;this.shadowRoot.innerHTML=`\n<style>\n svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n <svg part="svg" ${i}>\n <foreignObject><span ${n}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(o=null===(s=this.wrapper)||void 0===s?void 0:s.querySelector(`svg[${i}]`))&&void 0!==o?o:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,s,o,r;let a=Math.ceil(null!==(e=null===(t=this.containerSize)||void 0===t?void 0:t.width)&&void 0!==e?e:0);const l=Math.ceil(null!==(n=null===(i=this.containerSize)||void 0===i?void 0:i.height)&&void 0!==n?n:0);void 0!==this.dataset.downscaleOnly&&(a=Math.max(a,null!==(o=null===(s=this.wrapperSize)||void 0===s?void 0:s.width)&&void 0!==o?o:0));const c=null===(r=this.svg)||void 0===r?void 0:r.querySelector(":scope > foreignObject");if(null==c||c.setAttribute("width",`${a}`),null==c||c.setAttribute("height",`${l}`),this.svg&&(this.svg.setAttribute("viewBox",`0 0 ${a} ${l}`),this.svg.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.svg.style.height=a<=0||l<=0?"0":""),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const o=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let r;const a=Symbol();let l;const c="marpitSVGPolyfill:setZoomFactor,",d=Symbol(),g=Symbol();const h=()=>{const t="Apple Computer, Inc."===navigator.vendor,e=t?[u]:[],i={then:e=>(t?(async()=>{if(void 0===l){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d"),i=new Image(10,10),n=new Promise((t=>{i.addEventListener("load",(()=>t()))}));i.crossOrigin="anonymous",i.src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%201%201%22%3E%3CforeignObject%20width%3D%221%22%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22width%3A%201px%3B%20height%3A%201px%3B%20background%3A%20red%3B%20position%3A%20relative%22%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E",await n,e.drawImage(i,0,0),l=e.getImageData(5,5,1,1).data[3]<128}return l})().then((t=>{null==e||e(t?[u]:[])})):null==e||e([]),i)};return Object.assign(e,i)};let p,m;function u(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[g]||(Object.defineProperty(window,g,{configurable:!0,value:!0}),document.body.style.zoom=1.0001,document.body.offsetHeight,document.body.style.zoom=1,window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(c)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(m=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,s,o,r;t.style.transform||(t.style.transform="translateZ(0)");const a=i||m||t.currentScale||1;p!==a&&(p=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i<c;i+=1){const n=t.children[i];if(n.getScreenCTM){const t=n.getScreenCTM();if(t){const i=null!==(s=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==s?s:0,c=null!==(r=null===(o=n.y)||void 0===o?void 0:o.baseVal.value)&&void 0!==r?r:0,d=n.children.length;for(let e=0;e<d;e+=1){const s=n.children[e];if("SECTION"===s.tagName){const{style:e}=s;e.transformOrigin||(e.transformOrigin=`${-i}px ${-c}px`),e.transform=`scale(${a}) matrix(${t.a}, ${t.b}, ${t.c}, ${t.d}, ${t.e-l.left}, ${t.f-l.top}) translateZ(0.0001px)`;break}}}}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${c}${n}`,"null"===window.origin?"*":window.origin)}))}function v({once:t=!1,target:e=document}={}){const i=function(t=document){if(t[d])return t[d];let e=!0;const i=()=>{e=!1,delete t[d]};Object.defineProperty(t,d,{configurable:!0,value:i});let n=[],s=!1;(async()=>{try{n=await h()}finally{s=!0}})();const o=()=>{for(const e of n)e({target:t});s&&0===n.length||e&&window.requestAnimationFrame(o)};return o(),i}(e);return t?(i(),()=>{}):i}p=1,m=void 0;const b=Symbol(),w=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",s);for(const n of Object.keys(t)){const s=`marp-${n}`,a=t[n].proto();null!=r||(r=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),r&&a!==HTMLElement?i||customElements.define(s,o(a,{style:t[n].style}),{extends:n}):(i||customElements.define(s,o(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${s}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${s}`).replace(new RegExp(`</${n}>$`,"i"),`</${s}>`)})))}window[a]=!0})(e),e[b])return e[b];const i=v({target:e}),n=()=>{i(),delete e[b]},l=Object.assign(n,{cleanup:n,update:()=>w(e)});return Object.defineProperty(e,b,{configurable:!0,value:l}),l},y=document.currentScript;w(y?y.getRootNode():document)}();
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="24" tabindex="0"><p><div>
<img src="slides-images/runtimes_torus_accel_nabla4_inter_128_80.png" style="width: 70%" align="center"/>
</div>
---</p></div><div class="bespoke-marp-note" data-index="25" tabindex="0"><p><div>
<img src="slides-images/runtimes_torus_accel_nabla4_vertical_inter_128_80.png" style="width: 70%" align="center"/>
</div>
---</p></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@3.4.0/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){o[e]&&(n&&l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))&&c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)&&void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=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(`${c}fragment`,(i?"":"in")+"active");const a=`${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),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:i=!0})=>{if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]&&o(i,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const i=e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})=>{if(r(-1)&&i)return o(t,n-1),!1;const a=t-1;e.fragments[a]&&o(a,e.fragments[a].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)},x=document,k=()=>!(!x.fullscreenEnabled&&!x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement&&!x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()&&(async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.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||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let i;const a=()=>{i&&clearTimeout(i),i=setTimeout((()=>{r.add(L),o()}),e),r.contains(L)&&(r.remove(L),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,a);setTimeout(a,0)},P=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],_=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(P.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},T=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("marp-auto-scaling, [data-auto-scaling], [data-marp-fitting]");t.setAttribute(`${c}load`,e?"":"hideable")}}))},I=({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",(i=>{let a=!1;const s=(e,t)=>{e&&(a=a||((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!==i.deltaX&&s(i.target,"X"),0!==i.deltaY&&s(i.target,"Y"),a)return;i.preventDefault();const l=Math.sqrt(i.deltaX**2+i.deltaY**2);if(void 0!==i.wheelDelta){if(void 0===i.webkitForce&&Math.abs(i.wheelDelta)<40)return;if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<4)return}else if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const c=Date.now()-o<e,d=l<=n;if(n=l,c||d)return;let u;(i.deltaX>0||i.deltaY>0)&&(u="next"),(i.deltaX<0||i.deltaY<0)&&(u="prev"),u&&(t[u](),o=Date.now())}))},M=(e=`.${l}osc`)=>{const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[${c}osc=${JSON.stringify(e)}]`).forEach(n)};return k()||n("fullscreen",(e=>e.style.display="none")),g||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",(()=>y(t,!1))),e.on("marp-inactive",(()=>y(t,!0))),k()&&(e=>{for(const t of["","webkit"])x.addEventListener(t+"fullscreenchange",e)})((()=>n("fullscreen",(e=>e.classList.toggle("exit",k()&&$())))))}},O=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),i=Number.parseInt(n,10)+1;i>=e.fragments[o].length&&(o+=1,i=0),e.slide(o,{fragment:i})}}))};var A=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let C=e=>String(e).replace(/[&<>"']/g,(e=>`&${D[e]};`)),D={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},N="dangerouslySetInnerHTML",B={className:"class",htmlFor:"for"},q={};function K(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!==N&&(r+=` ${B[e]?B[e]:C(e)}="${C(t[e])}"`);r+=">"}if(-1===A.indexOf(e)){if(t[N])r+=t[N].__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===q[e]?e:C(e)}r+=e?`</${e}>`:""}return q[r]=!0,r}const j=({children:e})=>K(null,null,...e),F=`${l}presenter-`,V={container:`${F}container`,dragbar:`${F}dragbar-container`,next:`${F}next`,nextContainer:`${F}next-container`,noteContainer:`${F}note-container`,noteWrapper:`${F}note-wrapper`,noteButtons:`${F}note-buttons`,infoContainer:`${F}info-container`,infoPage:`${F}info-page`,infoPageText:`${F}info-page-text`,infoPagePrev:`${F}info-page-prev`,infoPageNext:`${F}info-page-next`,noteButtonsBigger:`${F}note-bigger`,noteButtonsSmaller:`${F}note-smaller`,infoTime:`${F}info-time`,infoTimer:`${F}info-timer`},U=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=V.container,t.appendChild(e),t.insertAdjacentHTML("beforeend",K(j,null,K("div",{class:V.nextContainer},K("iframe",{class:V.next,src:"?view=next"})),K("div",{class:V.dragbar}),K("div",{class:V.noteContainer},K("div",{class:V.noteWrapper}),K("div",{class:V.noteButtons},K("button",{class:V.noteButtonsSmaller,tabindex:"-1",title:"Smaller notes font size"},"Smaller notes font size"),K("button",{class:V.noteButtonsBigger,tabindex:"-1",title:"Bigger notes font size"},"Bigger notes font size"))),K("div",{class:V.infoContainer},K("div",{class:V.infoPage},K("button",{class:V.infoPagePrev,tabindex:"-1",title:"Previous"},"Previous"),K("span",{class:V.infoPageText}),K("button",{class:V.infoPageNext,tabindex:"-1",title:"Next"},"Next")),K("time",{class:V.infoTime,title:"Current time"}),K("time",{class:V.infoTimer,title:"Timer"})))),t})(e.parent)),(e=>{let t=!1;r(V.dragbar).addEventListener("mousedown",(()=>{t=!0,r(V.dragbar).classList.add("active")})),window.addEventListener("mouseup",(()=>{t=!1,r(V.dragbar).classList.remove("active")})),window.addEventListener("mousemove",(e=>{if(!t)return;const n=e.clientX/document.documentElement.clientWidth*100;r(V.container).style.setProperty("--bespoke-marp-presenter-split-ratio",`${Math.max(0,Math.min(100,n))}%`)})),r(V.nextContainer).addEventListener("click",(()=>e.next()));const n=r(V.next),o=(i=n,(e,t)=>{var n;return null===(n=i.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var i;n.addEventListener("load",(()=>{r(V.nextContainer).classList.add("active"),o(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>o(e,t)))}));const a=document.querySelectorAll(".bespoke-marp-note");a.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(V.noteWrapper).appendChild(e)})),e.on("activate",(()=>a.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide())))));let s=0;const l=e=>{s=Math.max(-5,s+e),r(V.noteContainer).style.setProperty("--bespoke-marp-note-font-scale",(1.2**s).toFixed(4))},c=()=>l(1),d=()=>l(-1),u=r(V.noteButtonsBigger),f=r(V.noteButtonsSmaller);u.addEventListener("click",(()=>{u.blur(),c()})),f.addEventListener("click",(()=>{f.blur(),d()})),document.addEventListener("keydown",(e=>{"+"===e.key&&c(),"-"===e.key&&d()}),!0),e.on("activate",(({index:t})=>{r(V.infoPageText).textContent=`${t+1} / ${e.slides.length}`}));const m=r(V.infoPagePrev),g=r(V.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),i=t(n/1e3/60%60),a=t(n/36e5%24);r(V.infoTime).textContent=e.toLocaleTimeString(),r(V.infoTimer).textContent=`${a}:${i}:${o}`};v(),setInterval(v,250),r(V.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:H},presenterUrl:{enumerable:!0,get:R}}),g&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))};function H(){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,F+this.syncKey,`width=${n},height=${r},menubar=no,toolbar=no`)}function R(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),d(e)}const W=e=>{const t=u();return t===a&&e.appendChild(document.createElement("span")),{"":X,[i]:U,[a]:O}[t]},J=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)+"%"}))}))},Y=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t},z=(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})=>{let n=t.fragment?Y(f("f")||""):null;((t,n)=>{const{min:r,max:o}=Math,{fragments:i,slides:a}=e,s=o(0,r(t,a.length-1)),l=o(0,r(n||0,i[s].length-1));s===e.slide()&&l===e.fragmentIndex||e.slide(s,{fragment:l})})((()=>{var t,r;if(location.hash){const[o]=location.hash.slice(1).split(":~:");if(/^\d+$/.test(o))return(null!==(t=Y(o))&&void 0!==t?t:1)-1;const i=document.getElementById(o)||document.querySelector(`a[name="${CSS.escape(o)}"]`);if(i){const{length:t}=e.slides;for(let o=0;o<t;o+=1)if(e.slides[o].contains(i)){const t=null===(r=e.fragments)||void 0===r?void 0:r[o],a=i.closest("[data-marpit-fragment]");if(t&&a){const e=t.indexOf(a);e>=0&&(n=e)}return o}}}return 0})(),n)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||m({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}),m({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>o()))})),n=!1}),0)}},G=(e={})=>{var t;const n=e.key||(null===(t=window.history.state)||void 0===t?void 0:t.marpBespokeSyncKey)||Math.random().toString(36).slice(2),r=`bespoke-marp-sync-${n}`;var i;i={marpBespokeSyncKey:n},m({},{setter:(e,...t)=>o({...e,...i},...t)});const a=()=>{const e=p(r);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=a(),n={...t,...e(t)};return v(r,JSON.stringify(n)),n},l=()=>{window.removeEventListener("pageshow",l),s((e=>({reference:(e.reference||0)+1})))};return e=>{l(),Object.defineProperty(e,"syncKey",{value:n,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===r&&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,forSync:!0})}finally{t=!0}}}));const o=()=>{const{reference:e}=a();void 0===e||e<=1?h(r):s((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",l),o()})),e.on("destroy",o)}},{PI:Q,abs:Z,sqrt:ee,atan2:te}=Math,ne={passive:!0},re=({slope:e=-.7,swipeThreshold:t=30}={})=>n=>{let r;const o=n.parent,i=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?i(e[0]):void 0}),ne),o.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=i(e.touches[0]),n=t.x-r.x,o=t.y-r.y;r.delta=ee(Z(n)**2+Z(o)**2),r.radian=te(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+Q)%(2*Q)-Q;n[t<0?"next":"prev"](),o.stopPropagation()}r=void 0}}),ne)},oe=new Map;oe.clear(),oe.set("none",{backward:{both:void 0,incoming:void 0,outgoing:void 0},forward:{both:void 0,incoming:void 0,outgoing:void 0}});const ie={both:"",outgoing:"outgoing-",incoming:"incoming-"},ae={forward:"",backward:"-backward"},se=e=>`--marp-bespoke-transition-animation-${e}`,le=e=>`--marp-transition-${e}`,ce=se("name"),de=se("duration"),ue=e=>new Promise((t=>{const n={},r=document.createElement("div"),o=e=>{r.remove(),t(e)};r.addEventListener("animationstart",(()=>o(n))),Object.assign(r.style,{animationName:e,animationDuration:"1s",animationFillMode:"both",animationPlayState:"paused",position:"absolute",pointerEvents:"none"}),document.body.appendChild(r);const i=getComputedStyle(r).getPropertyValue(le("duration"));i&&(n.defaultDuration=i),((e,t)=>{requestAnimationFrame((()=>{e.style.animationPlayState="running",requestAnimationFrame((()=>t(void 0)))}))})(r,o)})),fe=async e=>oe.has(e)?oe.get(e):(e=>{const t={},n=[];for(const[r,o]of Object.entries(ie))for(const[i,a]of Object.entries(ae)){const s=`marp-${o}transition${a}-${e}`;n.push(ue(s).then((e=>{t[i]=t[i]||{},t[i][r]=e?{...e,name:s}:void 0})))}return Promise.all(n).then((()=>t))})(e).then((t=>(oe.set(e,t),t))),me=e=>Object.values(e).flatMap(Object.values).every((e=>!e)),ge=(e,{type:t,backward:n})=>{const r=e[n?"backward":"forward"],o=(()=>{const e=r[t],n=e=>({[ce]:e.name});if(e)return n(e);if(r.both){const e=n(r.both);return"incoming"===t&&(e[se("direction")]="reverse"),e}})();return!o&&n?ge(e,{type:t,backward:!1}):o||{[ce]:"__bespoke_marp_transition_no_animation__"}},pe=e=>{if(e)try{const t=JSON.parse(e);if((e=>{if("object"!=typeof e)return!1;const t=e;return"string"==typeof t.name&&(void 0===t.duration||"string"==typeof t.duration)})(t))return t}catch(e){}},ve="_tSId",he="_tA",ye="bespoke-marp-transition-warming-up",be=window.matchMedia("(prefers-reduced-motion: reduce)"),we="__bespoke_marp_transition_reduced_outgoing__",xe="__bespoke_marp_transition_reduced_incoming__",ke={forward:{both:void 0,incoming:{name:xe},outgoing:{name:we}},backward:{both:void 0,incoming:{name:xe},outgoing:{name:we}}},$e=e=>{if(!document.startViewTransition)return;const t=t=>(void 0!==t&&(e._tD=t),e._tD);let n;t(!1),((...e)=>{const t=[...new Set(e).values()];return Promise.all(t.map((e=>fe(e)))).then()})(...Array.from(document.querySelectorAll("section[data-transition], section[data-transition-back]")).flatMap((e=>[e.dataset.transition,e.dataset.transitionBack].flatMap((e=>{const t=pe(e);return[null==t?void 0:t.name,(null==t?void 0:t.builtinFallback)?`__builtin__${t.name}`:void 0]})).filter((e=>!!e))))).then((()=>{document.querySelectorAll("style").forEach((e=>{e.innerHTML=e.innerHTML.replace(/--marp-transition-duration:[^;}]*[;}]/g,(e=>e.slice(0,-1)+"!important"+e.slice(-1)))}))}));const r=(n,{back:r,cond:o})=>i=>{var a;const s=t();if(s)return!!i[he]||!("object"!=typeof s||(s.skipTransition(),!i.forSync));if(!o(i))return!0;const l=e.slides[e.slide()],c=()=>{var e;return null!==(e=i.back)&&void 0!==e?e:r},d="data-transition"+(c()?"-back":""),u=l.querySelector(`section[${d}]`);if(!u)return!0;const f=pe(null!==(a=u.getAttribute(d))&&void 0!==a?a:void 0);return!f||((async(e,{builtinFallback:t=!0}={})=>{let n=await fe(e);if(me(n)){if(!t)return;return n=await fe(`__builtin__${e}`),me(n)?void 0:n}return n})(f.name,{builtinFallback:f.builtinFallback}).then((e=>{if(!e){t(!0);try{n(i)}finally{t(!1)}return}let r=e;be.matches&&(console.warn("Use a constant animation to transition because preferring reduced motion by viewer has detected."),r=ke);const o=document.getElementById(ve);o&&o.remove();const a=document.createElement("style");a.id=ve,document.head.appendChild(a),((e,t)=>{const n=[`:root{${le("direction")}:${t.backward?-1:1};}`,":root:has(.bespoke-marp-inactive){cursor:none;}"],r=t=>{var n,o,i;const a=(null===(n=e[t].both)||void 0===n?void 0:n.defaultDuration)||(null===(o=e[t].outgoing)||void 0===o?void 0:o.defaultDuration)||(null===(i=e[t].incoming)||void 0===i?void 0:i.defaultDuration);return"forward"===t?a:a||r("forward")},o=t.duration||r(t.backward?"backward":"forward");void 0!==o&&n.push(`::view-transition-group(*){${de}:${o};}`);const i=e=>Object.entries(e).map((([e,t])=>`${e}:${t};`)).join("");return n.push(`::view-transition-old(root){${i(ge(e,{...t,type:"outgoing"}))}}`,`::view-transition-new(root){${i(ge(e,{...t,type:"incoming"}))}}`),n})(r,{backward:c(),duration:f.duration}).forEach((e=>{var t;return null===(t=a.sheet)||void 0===t?void 0:t.insertRule(e)}));const s=document.documentElement.classList;s.add(ye);let l=!1;const d=()=>{l||(n(i),l=!0,s.remove(ye))},u=()=>{t(!1),a.remove(),s.remove(ye)};try{t(!0);const e=document.startViewTransition(d);t(e),e.finished.finally(u)}catch(e){console.error(e),d(),u()}})),!1)};e.on("prev",r((t=>e.prev({...t,[he]:!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,[he]:!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,[he]:!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 Ee;const Le=()=>(void 0===Ee&&(Ee="wakeLock"in navigator&&navigator.wakeLock),Ee),Se=async()=>{const e=Le();if(e)try{return await e.request("screen")}catch(e){console.warn(e)}return null},Pe=async()=>{if(!Le())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&Se()};for(const e of["visibilitychange","fullscreenchange"])document.addEventListener(e,t);return e=await Se(),e};((e=document.getElementById(":$p"))=>{(()=>{const e=f("view");r.dataset.bespokeView=e===a||e===i?e:""})();const t=(e=>{const t=f(e);return m({[e]:void 0}),t})("sync")||void 0;n.from(e,((...e)=>{const t=s.findIndex((e=>u()===e));return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[1,1,0],G({key:t})],[[1,1,1],W(e)],[[1,1,0],_],[[1,1,1],b],[[1,0,0],S()],[[1,1,1],T],[[1,1,1],z({history:!1})],[[1,1,0],I()],[[1,1,0],E],[[1,0,0],J],[[1,1,0],re()],[[1,0,0],M()],[[1,0,0],$e],[[1,1,1],w],[[1,1,0],Pe]))})()}();</script></body></html>