-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdesign-doc.html
More file actions
2997 lines (2750 loc) · 207 KB
/
Copy pathdesign-doc.html
File metadata and controls
2997 lines (2750 loc) · 207 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
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quantum.Tech World — Quip Network Trading Competition</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=VT323&family=Anton&family=Space+Grotesk:wght@400;500;700&family=Major+Mono+Display&family=Archivo+Black&family=Playfair+Display:wght@400;700;900&family=DM+Serif+Display&display=swap">
<link rel="stylesheet" href="shared-design/v4-mocks.css">
</head>
<body>
<!-- Canonical Quip Network lockup + supported-asset cryptocurrency symbols. -->
<!-- KEEP IN SYNC WITH shared-design/symbols.svg.html (used by MVP React app) -->
<svg style="display:none" aria-hidden="true">
<!-- BTC · Bitcoin -->
<symbol id="crypto-btc" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#F7931A"/>
<path d="M22.6 14.0c.3-2.1-1.3-3.2-3.5-4l.7-2.8-1.7-.4-.7 2.8c-.5-.1-.9-.2-1.4-.3l.7-2.8-1.7-.4-.7 2.8c-.4-.1-.7-.2-1.1-.3l-2.4-.6-.5 1.9 1.3.3c.7.2.8.6.8 1l-.8 3.2c.0 0 .1 0 .2.1l-.2-.1-1.1 4.6c-.1.2-.3.5-.8.4l-1.3-.3-.9 2.0 2.3.6c.4.1.8.2 1.2.3l-.7 2.9 1.7.4.7-2.8c.5.1.9.2 1.4.4l-.7 2.8 1.7.4.7-2.9c2.9.6 5.2.3 6.1-2.3.7-2.1-.0-3.4-1.6-4.2 1.1-.3 2.0-1.0 2.2-2.6zM19.7 18.8c-.5 2.2-4.1 1.0-5.3.7l1.0-3.8c1.2.3 4.9.9 4.4 3.1zm.5-5.0c-.5 1.9-3.5 1.0-4.5.7l.9-3.5c1.0.3 4.1.7 3.6 2.8z" fill="white"/>
</symbol>
<!-- ETH · Ethereum -->
<symbol id="crypto-eth" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#627EEA"/>
<g fill="white">
<path fill-opacity="0.6" d="M16.5 4L16.5 12.9 24 16.2z"/>
<path d="M16.5 4L9 16.2 16.5 12.9z"/>
<path fill-opacity="0.6" d="M16.5 22L16.5 28 24 17.6z"/>
<path d="M16.5 28L16.5 22 9 17.6z"/>
<path fill-opacity="0.2" d="M16.5 20.6L24 16.2 16.5 12.9z"/>
<path fill-opacity="0.6" d="M9 16.2L16.5 20.6 16.5 12.9z"/>
</g>
</symbol>
<!-- SOL · Solana -->
<symbol id="crypto-sol" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#0c0c10"/>
<path d="M8.8 21.2c0.2-0.2 0.4-0.3 0.7-0.3h14c0.4 0 0.6 0.5 0.3 0.8L21.2 24c-0.2 0.2-0.4 0.3-0.7 0.3h-14c-0.4 0-0.6-0.5-0.3-0.8L8.8 21.2z" fill="#14F195"/>
<path d="M8.8 11.4c0.2-0.2 0.5-0.3 0.7-0.3h14c0.4 0 0.6 0.5 0.3 0.8l-2.6 2.4c-0.2 0.2-0.4 0.3-0.7 0.3h-14c-0.4 0-0.6-0.5-0.3-0.8L8.8 11.4z" fill="#9945FF"/>
<path d="M21.2 16.3c-0.2-0.2-0.5-0.3-0.7-0.3h-14c-0.4 0-0.6 0.5-0.3 0.8l2.6 2.4c0.2 0.2 0.4 0.3 0.7 0.3h14c0.4 0 0.6-0.5 0.3-0.8L21.2 16.3z" fill="#19FB9B"/>
</symbol>
<!-- LINK · Chainlink -->
<symbol id="crypto-link" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#2A5ADA"/>
<path d="M16 6.5l-1.7 1 -6.3 3.6v9.8L16 25.5l8-4.6V10.9l-6.3-3.6L16 6.5zm0 3.2l5.2 3v6l-5.2 3 -5.2-3v-6l5.2-3z" fill="white"/>
</symbol>
<!-- UNI · Uniswap -->
<symbol id="crypto-uni" viewBox="0 0 640 640">
<circle cx="320" cy="320" r="320" fill="#FF007A"/>
<path d="M224.534 123.226C218.692 122.32 218.445 122.213 221.195 121.791C226.464 120.98 238.905 122.085 247.479 124.123C267.494 128.881 285.707 141.069 305.148 162.714L310.313 168.465L317.701 167.277C348.828 162.275 380.493 166.25 406.978 178.485C414.264 181.851 425.752 188.552 427.187 190.274C427.645 190.822 428.485 194.355 429.053 198.124C431.02 211.164 430.036 221.16 426.047 228.625C423.877 232.688 423.756 233.975 425.215 237.452C426.38 240.227 429.627 242.28 432.843 242.276C439.425 242.267 446.509 231.627 449.791 216.823L451.095 210.943L453.678 213.868C467.846 229.92 478.974 251.811 480.885 267.393L481.383 271.455L479.002 267.762C474.903 261.407 470.785 257.08 465.512 253.591C456.006 247.301 445.955 245.161 419.337 243.758C395.296 242.491 381.69 240.438 368.198 236.038C345.244 228.554 333.672 218.587 306.405 182.812C294.294 166.923 286.808 158.131 279.362 151.051C262.442 134.964 245.816 126.527 224.534 123.226Z" fill="white"/>
<path d="M432.61 158.704C433.215 148.057 434.659 141.033 437.562 134.62C438.711 132.081 439.788 130.003 439.954 130.003C440.12 130.003 439.621 131.877 438.844 134.167C436.733 140.392 436.387 148.905 437.84 158.811C439.686 171.379 440.735 173.192 454.019 186.769C460.25 193.137 467.497 201.168 470.124 204.616L474.901 210.886L470.124 206.405C464.282 200.926 450.847 190.24 447.879 188.712C445.89 187.688 445.594 187.705 444.366 188.927C443.235 190.053 442.997 191.744 442.84 199.741C442.596 212.204 440.897 220.204 436.797 228.203C434.58 232.529 434.23 231.606 436.237 226.723C437.735 223.077 437.887 221.474 437.876 209.408C437.853 185.167 434.975 179.339 418.097 169.355C413.821 166.826 406.776 163.178 402.442 161.249C398.107 159.32 394.664 157.639 394.789 157.514C395.267 157.038 411.727 161.842 418.352 164.39C428.206 168.181 429.833 168.672 431.03 168.215C431.832 167.909 432.22 165.572 432.61 158.704Z" fill="white"/>
<path d="M235.883 200.175C224.022 183.846 216.684 158.809 218.272 140.093L218.764 134.301L221.463 134.794C226.534 135.719 235.275 138.973 239.369 141.459C250.602 148.281 255.465 157.263 260.413 180.328C261.862 187.083 263.763 194.728 264.638 197.317C266.047 201.483 271.369 211.214 275.696 217.534C278.813 222.085 276.743 224.242 269.853 223.62C259.331 222.67 245.078 212.834 235.883 200.175Z" fill="white"/>
<path d="M418.223 321.707C362.793 299.389 343.271 280.017 343.271 247.331C343.271 242.521 343.437 238.585 343.638 238.585C343.84 238.585 345.985 240.173 348.404 242.113C359.644 251.128 372.231 254.979 407.076 260.062C427.58 263.054 439.119 265.47 449.763 269C483.595 280.22 504.527 302.99 509.518 334.004C510.969 343.016 510.118 359.915 507.766 368.822C505.91 375.857 500.245 388.537 498.742 389.023C498.325 389.158 497.917 387.562 497.81 385.389C497.24 373.744 491.355 362.406 481.472 353.913C470.235 344.257 455.137 336.569 418.223 321.707Z" fill="white"/>
<path d="M379.31 330.978C378.615 326.846 377.411 321.568 376.633 319.25L375.219 315.036L377.846 317.985C381.481 322.065 384.354 327.287 386.789 334.241C388.647 339.549 388.856 341.127 388.842 349.753C388.828 358.221 388.596 359.996 386.88 364.773C384.174 372.307 380.816 377.649 375.181 383.383C365.056 393.688 352.038 399.393 333.253 401.76C329.987 402.171 320.47 402.864 312.103 403.299C291.016 404.395 277.138 406.661 264.668 411.04C262.875 411.67 261.274 412.052 261.112 411.89C260.607 411.388 269.098 406.326 276.111 402.948C285.999 398.185 295.842 395.586 317.897 391.913C328.792 390.098 340.043 387.897 342.9 387.021C369.88 378.749 383.748 357.402 379.31 330.978Z" fill="white"/>
<path d="M404.719 376.105C397.355 360.273 395.664 344.988 399.698 330.732C400.13 329.209 400.824 327.962 401.242 327.962C401.659 327.962 403.397 328.902 405.103 330.05C408.497 332.335 415.303 336.182 433.437 346.069C456.065 358.406 468.966 367.959 477.74 378.873C485.423 388.432 490.178 399.318 492.467 412.593C493.762 420.113 493.003 438.206 491.074 445.778C484.99 469.653 470.85 488.406 450.682 499.349C447.727 500.952 445.075 502.269 444.788 502.275C444.501 502.28 445.577 499.543 447.18 496.191C453.965 482.009 454.737 468.214 449.608 452.859C446.467 443.457 440.064 431.985 427.135 412.596C412.103 390.054 408.417 384.054 404.719 376.105Z" fill="white"/>
<path d="M196.519 461.525C217.089 444.157 242.682 431.819 265.996 428.032C276.043 426.399 292.78 427.047 302.084 429.428C316.998 433.245 330.338 441.793 337.276 451.978C344.057 461.932 346.966 470.606 349.995 489.906C351.189 497.519 352.489 505.164 352.882 506.895C355.156 516.897 359.583 524.892 365.067 528.907C373.779 535.283 388.78 535.68 403.536 529.924C406.041 528.947 408.215 528.271 408.368 528.424C408.903 528.955 401.473 533.93 396.23 536.548C389.177 540.071 383.568 541.434 376.115 541.434C362.6 541.434 351.379 534.558 342.016 520.539C340.174 517.78 336.032 509.516 332.813 502.176C322.928 479.628 318.046 472.759 306.568 465.242C296.579 458.701 283.697 457.53 274.006 462.282C261.276 468.523 257.724 484.791 266.842 495.101C270.465 499.198 277.223 502.732 282.749 503.419C293.086 504.705 301.97 496.841 301.97 486.404C301.97 479.627 299.365 475.76 292.808 472.801C283.852 468.76 274.226 473.483 274.272 481.897C274.292 485.484 275.854 487.737 279.45 489.364C281.757 490.408 281.811 490.491 279.929 490.1C271.712 488.396 269.787 478.49 276.394 471.913C284.326 464.018 300.729 467.502 306.362 478.279C308.728 482.805 309.003 491.82 306.94 497.264C302.322 509.448 288.859 515.855 275.201 512.368C265.903 509.994 262.117 507.424 250.906 495.876C231.425 475.809 223.862 471.92 195.777 467.536L190.395 466.696L196.519 461.525Z" fill="white"/>
<path d="M49.6202 12.0031C114.678 90.9638 214.977 213.901 219.957 220.784C224.068 226.467 222.521 231.576 215.478 235.58C211.561 237.807 203.508 240.063 199.476 240.063C194.916 240.063 189.779 237.867 186.038 234.318C183.393 231.81 172.721 215.874 148.084 177.646C129.233 148.396 113.457 124.131 113.027 123.725C112.032 122.785 112.049 122.817 146.162 183.854C167.582 222.181 174.813 235.731 174.813 237.543C174.813 241.229 173.808 243.166 169.261 248.238C161.681 256.694 158.293 266.195 155.847 285.859C153.104 307.902 145.394 323.473 124.026 350.122C111.518 365.722 109.471 368.581 106.315 374.869C102.339 382.786 101.246 387.221 100.803 397.219C100.335 407.79 101.247 414.619 104.477 424.726C107.304 433.575 110.255 439.417 117.8 451.104C124.311 461.188 128.061 468.683 128.061 471.614C128.061 473.947 128.506 473.95 138.596 471.672C162.741 466.219 182.348 456.629 193.375 444.877C200.199 437.603 201.801 433.586 201.853 423.618C201.887 417.098 201.658 415.733 199.896 411.982C197.027 405.877 191.804 400.801 180.292 392.932C165.209 382.621 158.767 374.32 156.987 362.904C155.527 353.537 157.221 346.928 165.565 329.44C174.202 311.338 176.342 303.624 177.79 285.378C178.725 273.589 180.02 268.94 183.407 265.209C186.939 261.317 190.119 260 198.861 258.805C213.113 256.858 222.188 253.171 229.648 246.297C236.119 240.334 238.827 234.588 239.243 225.938L239.558 219.382L235.942 215.166C222.846 199.896 40.85 0 40.044 0C39.8719 0 44.1813 5.40178 49.6202 12.0031ZM135.412 409.18C138.373 403.937 136.8 397.195 131.847 393.902C127.167 390.79 119.897 392.256 119.897 396.311C119.897 397.548 120.582 398.449 122.124 399.243C124.72 400.579 124.909 402.081 122.866 405.152C120.797 408.262 120.964 410.996 123.337 412.854C127.162 415.849 132.576 414.202 135.412 409.18Z" fill="white"/>
<path d="M248.552 262.244C241.862 264.299 235.358 271.39 233.344 278.826C232.116 283.362 232.813 291.319 234.653 293.776C237.625 297.745 240.499 298.791 248.282 298.736C263.518 298.63 276.764 292.095 278.304 283.925C279.567 277.229 273.749 267.948 265.736 263.874C261.601 261.772 252.807 260.938 248.552 262.244ZM266.364 276.172C268.714 272.834 267.686 269.225 263.69 266.785C256.08 262.138 244.571 265.983 244.571 273.173C244.571 276.752 250.572 280.656 256.074 280.656C259.735 280.656 264.746 278.473 266.364 276.172Z" fill="white"/>
</symbol>
<!-- USDC · USD Coin -->
<symbol id="crypto-usdc" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#2775CA"/>
<path d="M20.0 18.5c0-1.6-1.0-2.2-2.9-2.4c-1.4-0.2-1.7-0.6-1.7-1.2c0-0.6 0.4-1.0 1.3-1.0c0.8 0 1.2 0.3 1.4 0.9c0.0 0.1 0.2 0.2 0.3 0.2h0.8c0.2 0 0.3-0.1 0.3-0.3v-0.0c-0.2-1.1-1.1-1.9-2.2-2.0v-1.2c0-0.2-0.1-0.3-0.4-0.4h-0.7c-0.2 0-0.3 0.1-0.4 0.4v1.1c-1.4 0.2-2.3 1.1-2.3 2.3c0 1.5 0.9 2.1 2.8 2.4c1.3 0.2 1.7 0.5 1.7 1.2c0 0.7-0.6 1.2-1.4 1.2c-1.1 0-1.5-0.5-1.6-1.1c0-0.2-0.2-0.2-0.3-0.2h-0.9c-0.2 0-0.3 0.1-0.3 0.3v0.0c0.2 1.2 1.0 2.1 2.5 2.3v1.2c0 0.2 0.1 0.3 0.4 0.4h0.7c0.2 0 0.3-0.1 0.4-0.4v-1.2C19.1 20.8 20.0 19.9 20.0 18.5zM12.6 22.7c-3.7-1.3-5.6-5.5-4.2-9.1c0.7-2.0 2.3-3.5 4.2-4.2c0.2-0.1 0.3-0.2 0.3-0.5V8.0c0-0.2-0.1-0.3-0.3-0.4c-0.0 0-0.1 0-0.2 0c-4.5 1.4-7.0 6.2-5.6 10.7c0.8 2.6 2.9 4.7 5.6 5.6c0.2 0.1 0.4-0.0 0.4-0.2c0.0-0.1 0-0.1 0-0.2v-0.6C12.8 22.9 12.7 22.8 12.6 22.7zM19.5 7.7c-0.2-0.1-0.4 0.0-0.4 0.2c-0.0 0.1 0 0.1 0 0.2v0.6c0 0.2 0.1 0.3 0.3 0.5c3.7 1.3 5.6 5.5 4.2 9.1c-0.7 2.0-2.3 3.5-4.2 4.2c-0.2 0.1-0.3 0.2-0.3 0.5v0.6c0 0.2 0.1 0.3 0.3 0.4c0.0 0 0.1 0 0.2 0c4.5-1.4 7.0-6.2 5.6-10.7C24.3 10.6 22.1 8.5 19.5 7.7z" fill="white"/>
</symbol>
<!-- Quip butterfly mark only — used as the kiosk sign-up "agent placeholder". -->
<symbol id="quip-butterfly" viewBox="219 4 106 103" preserveAspectRatio="xMidYMid meet">
<path fill-rule="evenodd" clip-rule="evenodd" d="M321.271 5.47445C322.032 5.0428 322.955 5.57248 323.09 6.3224C323.091 6.32628 323.096 6.32655 323.097 6.32272C323.099 6.31833 323.105 6.31974 323.105 6.32428C323.103 6.34225 323.1 6.36038 323.098 6.37837V6.38025C323.115 6.5118 323.107 6.64924 323.069 6.78891C323.05 6.86034 323.031 6.93194 323.021 7.00527C322.989 7.26132 322.954 7.52093 322.917 7.78351C322.906 7.85834 322.908 7.93466 322.9 8.00988C322.898 8.03536 322.894 8.06124 322.888 8.08742C322.873 8.15382 322.854 8.21713 322.844 8.2844C320.291 25.3798 312.365 55.1549 302.309 55.3027C312.761 55.4599 323.089 87.7134 323.111 104.053C323.11 104.06 323.101 104.06 323.099 104.054C323.097 104.048 323.088 104.049 323.087 104.055C322.944 104.798 322.027 105.318 321.271 104.889C319.358 103.803 317.047 102.613 314.551 101.327C304.617 96.2118 291.74 89.5808 289.239 81.908C289.123 81.5509 288.83 81.2748 288.462 81.1998C284.033 80.2969 280.783 78.5915 278.4 76.3941C277.996 76.0224 277.364 76.0222 277.006 76.4375C275.425 78.2706 274.028 80.4359 273.091 82.1187C272.692 82.8344 271.578 82.8491 271.171 82.1384C270.206 80.4569 268.784 78.2671 267.153 76.4244C266.794 76.0179 266.169 76.0226 265.77 76.3906C263.386 78.5898 260.135 80.2965 255.703 81.1998C255.336 81.2748 255.043 81.5509 254.926 81.908C252.426 89.5808 239.549 96.2115 229.615 101.327C227.119 102.613 224.808 103.803 222.895 104.889C222.141 105.317 221.226 104.8 221.08 104.06C221.079 104.054 221.071 104.054 221.069 104.059C221.068 104.065 221.059 104.064 221.059 104.058C221.059 104.005 221.06 103.951 221.06 103.898C221.059 103.865 221.059 103.832 221.061 103.798C221.222 87.3799 231.462 55.4603 241.86 55.3039C231.807 55.1562 223.885 25.4003 221.328 8.30223C221.317 8.23026 221.296 8.16275 221.28 8.0918C221.273 8.06363 221.269 8.03568 221.266 8.00832C221.259 7.92871 221.261 7.84799 221.25 7.76881C221.215 7.51775 221.181 7.26944 221.15 7.02435C221.14 6.94732 221.119 6.87222 221.098 6.79735C221.057 6.64966 221.049 6.50432 221.068 6.36587V6.36399C221.067 6.34939 221.065 6.33479 221.063 6.32022C221.063 6.31616 221.069 6.31474 221.07 6.31865C221.071 6.322 221.076 6.32177 221.077 6.31834C221.214 5.57053 222.136 5.0435 222.895 5.47445C224.808 6.56107 227.119 7.75112 229.615 9.03669C239.549 14.1521 252.426 20.7832 254.926 28.4559C255.043 28.8131 255.336 29.0892 255.703 29.1641C260.218 30.0844 263.508 31.8382 265.903 34.0971C266.304 34.4755 266.941 34.4807 267.302 34.0643C268.87 32.2586 270.235 30.1516 271.17 28.5219C271.578 27.8114 272.692 27.8261 273.091 28.5416C274 30.1717 275.339 32.2544 276.859 34.0493C277.219 34.4742 277.863 34.4736 278.268 34.0918C280.663 31.8354 283.951 30.0837 288.463 29.1641C288.83 29.0891 289.123 28.813 289.239 28.4559C291.74 20.7831 304.617 14.1521 314.551 9.03669C317.047 7.75113 319.358 6.56107 321.271 5.47445ZM268.733 60.9185C268.855 60.1338 268.194 59.467 267.408 59.5722C265.297 59.8545 263.43 60.3681 261.889 61.2124C259.966 62.2666 258.395 63.9135 257.501 66.7654C257.082 68.1024 255.923 69.0641 254.545 69.2327L254.412 69.2468C252.173 69.435 249.637 70.5199 246.865 72.5661C244.112 74.5986 241.328 77.4307 238.635 80.7665C238.007 81.5443 237.388 82.3446 236.779 83.1621C235.92 84.3163 237.425 85.7611 238.637 84.9859C243.105 82.1268 248.01 79.7201 253.177 78.2989C263.83 75.369 267.743 67.2975 268.733 60.9185ZM276.584 59.5722C275.798 59.467 275.137 60.1339 275.259 60.9185C276.249 67.2975 280.162 75.369 290.815 78.2989C295.982 79.7201 300.887 82.1269 305.355 84.9859C306.567 85.7612 308.072 84.3163 307.213 83.1621C306.604 82.3446 305.985 81.5443 305.357 80.7665C302.664 77.4307 299.88 74.5986 297.127 72.5661C294.355 70.52 291.819 69.435 289.58 69.2468L289.446 69.2327C288.069 69.064 286.91 68.1023 286.491 66.7654C285.597 63.9135 284.026 62.2666 282.102 61.2124C280.562 60.3682 278.695 59.8545 276.584 59.5722ZM299.855 62.3837C299.602 61.3685 296.996 62.1146 296.27 62.8668C295.523 63.6395 296.604 66.7061 297.545 67.2254C298.084 67.5231 298.617 67.8454 299.145 68.19C300.038 68.7732 301.534 67.6198 301.164 66.6188C300.584 65.0464 300.166 63.6299 299.855 62.3837ZM247.904 62.8727C247.176 62.1199 244.566 61.3756 244.312 62.3921C244.002 63.6359 243.584 65.0491 243.005 66.6175C242.636 67.6184 244.131 68.7712 245.024 68.1881C245.554 67.8421 246.089 67.5188 246.631 67.2201C247.572 66.7008 248.652 63.6458 247.904 62.8727ZM256.505 50.2205C255.824 49.4223 253.032 49.6155 252.378 50.4363C250.348 52.9873 247.078 54.6555 245.2 55.2605C245.192 55.2629 245.186 55.2674 245.181 55.2733C245.165 55.2911 245.166 55.3183 245.181 55.3361C245.187 55.342 245.193 55.3468 245.2 55.3493C247.08 55.9548 250.355 57.5932 252.385 60.1256C253.039 60.9418 255.783 61.1243 256.457 60.3241C259.516 56.6915 264.243 55.5414 269.001 55.247C264.268 54.953 259.566 53.8102 256.505 50.2205ZM291.796 50.4428C291.142 49.6222 288.337 49.4285 287.656 50.2268C284.595 53.8114 279.896 54.9532 275.166 55.247C279.92 55.5412 284.642 56.6897 287.702 60.3154C288.377 61.1155 291.135 60.9324 291.791 60.1162C293.821 57.5887 297.091 55.9532 298.969 55.3483C298.976 55.3459 298.983 55.3411 298.988 55.3352C299.004 55.3173 299.004 55.29 298.988 55.272C298.983 55.2661 298.977 55.2616 298.969 55.2592C297.093 54.6548 293.827 52.9894 291.796 50.4428ZM238.637 25.3374C237.425 24.5623 235.92 26.007 236.779 27.1612C237.388 27.9787 238.007 28.779 238.635 29.5569C241.328 32.8927 244.112 35.725 246.865 37.7575C249.637 39.8037 252.173 40.8883 254.412 41.0765L254.545 41.0906C255.923 41.2592 257.082 42.2212 257.501 43.5582C258.395 46.41 259.966 48.0567 261.889 49.1109C263.43 49.9552 265.297 50.4688 267.408 50.7511C268.194 50.8563 268.855 50.1897 268.733 49.4051C267.743 43.0261 263.83 34.9543 253.177 32.0244C248.01 30.6032 243.105 28.1965 238.637 25.3374ZM307.213 27.1612C308.072 26.007 306.567 24.5621 305.355 25.3374C300.887 28.1964 295.982 30.6032 290.815 32.0244C280.162 34.9543 276.249 43.0261 275.259 49.4051C275.137 50.1897 275.798 50.8563 276.584 50.7511C278.695 50.4688 280.562 49.9551 282.102 49.1109C284.026 48.0567 285.597 46.4101 286.491 43.5582C286.91 42.2213 288.069 41.2593 289.446 41.0906L289.58 41.0765C291.819 40.8883 294.355 39.8037 297.127 37.7575C299.88 35.725 302.664 32.8927 305.357 29.5569C305.985 28.779 306.604 27.9787 307.213 27.1612ZM244.994 42.1562C244.09 41.564 242.52 42.7809 242.904 43.7918C243.702 45.892 244.206 47.7124 244.547 49.2281C244.731 50.043 246.233 50.1287 246.649 49.4042C248.051 46.9568 250.131 45.8512 251.894 45.5111C252.016 45.4875 252.03 45.2045 251.909 45.1744C249.509 44.6515 247.199 43.6003 244.994 42.1562ZM301.264 43.7905C301.648 42.7796 300.078 41.5622 299.173 42.1546C296.972 43.5967 294.667 44.6472 292.271 45.1712C292.148 45.2018 292.161 45.4875 292.285 45.5117C294.043 45.8535 296.113 46.9563 297.513 49.3898C297.931 50.1163 299.441 50.0302 299.625 49.2125C299.966 47.6997 300.469 45.8841 301.264 43.7905Z" fill="currentColor"/>
</symbol>
<symbol id="quip-wm" viewBox="0 0 725 106" preserveAspectRatio="xMidYMid meet">
<path d="M332.75 77.7228V72.5485H335.447C338.36 72.5485 340.086 71.4705 340.086 68.1287V37.9451C340.086 34.3878 338.791 32.9864 335.339 32.9864H332.966V27.9198H352.923L353.57 36.0047H354.002C357.022 30.9382 362.956 27.0574 370.507 27.0574C380.108 27.0574 386.581 33.4176 386.581 42.1493V68.1287C386.581 71.3627 387.983 72.5485 391.328 72.5485H393.161V77.7228H366.084V72.5485H368.242C371.262 72.5485 372.988 71.4705 372.988 68.1287V46.1378C372.988 39.7777 368.997 36.8671 364.142 36.8671C358.856 36.8671 353.678 40.7479 353.678 47.3236V68.1287C353.678 71.3627 355.404 72.5485 358.749 72.5485H360.798V77.7228H332.75Z" fill="currentColor"/>
<path d="M419.765 79.4476C405.31 79.4476 394.198 69.6379 394.198 54.0071C394.198 37.7295 405.849 27.0574 420.52 27.0574C433.789 27.0574 443.175 35.8969 442.204 50.2342H408.006C408.222 61.9842 414.695 69.2067 424.188 69.2067C430.229 69.2067 435.839 66.2962 437.349 60.3672H442.419C441.341 70.8237 433.034 79.4476 419.765 79.4476ZM408.438 44.3052H425.698C427.532 44.3052 429.043 43.874 429.043 41.0713C429.043 36.9749 425.806 33.0942 420.089 33.0942C414.587 33.0942 409.948 36.8671 408.438 44.3052Z" fill="currentColor"/>
<path d="M467.851 79.4476C458.358 79.4476 452.316 73.9499 452.316 64.6792V35.6813H444.765V29.2134C445.952 28.9978 447.138 28.6744 448.109 28.2432C451.777 26.5185 452.964 23.3923 452.964 18.1102V14.8762H465.909V27.9198H483.385V35.6813H465.909V60.7984C465.909 65.6494 468.282 68.9911 473.029 68.9911C477.02 68.9911 479.933 66.8351 480.796 62.5232H485.866C485.219 72.8719 478.531 79.4476 467.851 79.4476Z" fill="currentColor"/>
<path d="M517.527 36.7593C516.34 33.741 515.153 32.9864 513.104 32.9864H510.838V27.9198H538.023V32.9864H534.032C531.011 32.9864 530.472 34.9268 531.551 37.9451L540.613 62.3076H541.152L551.724 37.9451C553.018 34.9268 552.263 32.9864 548.919 32.9864H545.467V27.9198H568.553V32.9864H566.611C563.483 32.9864 561.972 34.6034 560.57 37.8373L543.094 78.154H533.385L522.921 50.8809L511.054 78.154H501.345L483.653 36.7593C482.359 33.741 481.064 32.9864 477.936 32.9864H476.102V27.9198H504.905V32.9864H501.453C498.432 32.9864 497.677 34.9268 498.972 37.9451L509.112 62.3076H509.76L519.145 40.9635L517.527 36.7593Z" fill="currentColor"/>
<path d="M590.789 79.4476C576.549 79.4476 565.114 69.2067 565.114 53.8993C565.114 38.5919 577.304 27.0574 592.084 27.0574C606.216 27.0574 617.651 37.2983 617.651 52.6057C617.651 67.9131 605.461 79.4476 590.789 79.4476ZM579.786 53.2525C579.786 65.326 583.669 72.6563 591.113 72.6563C598.664 72.6563 602.979 65.1104 602.979 53.2525C602.979 41.0713 599.096 33.8488 591.652 33.8488C584.209 33.8488 579.786 41.3947 579.786 53.2525Z" fill="currentColor"/>
<path d="M619.245 77.7228V72.5485H621.942C624.855 72.5485 626.581 71.4705 626.581 68.1287V37.9451C626.581 34.3878 625.286 32.9864 621.834 32.9864H619.461V27.9198H639.418L640.174 37.0827H640.605C643.841 30.8304 649.883 27.0574 655.384 27.0574C660.994 27.0574 664.554 30.2914 664.554 34.9268C664.554 39.5621 661.102 42.1493 657.11 42.1493C652.364 42.1493 651.285 38.3763 647.509 38.3763C644.165 38.3763 640.174 41.8259 640.174 49.4796V67.5897C640.174 71.2549 642.115 72.5485 645.891 72.5485H649.343V77.7228H619.245Z" fill="currentColor"/>
<path d="M660.491 77.7228V72.5485H662.756C666.1 72.5485 667.719 71.2549 667.719 68.0209V9.59408C667.719 6.36011 666.64 5.17433 663.296 5.17433H660.383V0H688.647V5.17433H685.734C682.39 5.17433 681.311 6.36011 681.311 9.59408V47.3236H682.929C685.518 47.3236 686.489 47.0002 688.863 45.1676L698.356 37.6217C701.053 35.5735 700.298 32.9864 697.277 32.9864H691.02V27.9198H723.383V32.9864H720.471C716.264 32.9864 713.998 34.3878 709.899 37.5139L696.522 47.9704L716.587 69.2067C719.284 72.0095 720.363 72.6563 723.383 72.6563H725.002V77.7228H693.717V72.6563H697.493C699.866 72.6563 701.053 70.7159 699.003 68.5599L688.215 56.8099C686.274 54.6539 685.734 54.3305 683.577 54.3305H681.311V68.0209C681.311 71.2549 682.929 72.5485 686.274 72.5485H688V77.7228H660.491Z" fill="currentColor"/>
<path d="M29.9803 105.071V99.9337H33.4482C37.1398 99.9337 38.2585 98.7314 38.2585 94.9059V70.6413H37.811C34.6787 74.904 28.9735 78.4016 21.3666 78.4016C8.72562 78.4016 0 68.2367 0 53.2626C0 35.4467 12.9766 25.2818 27.0718 25.2818C32.3295 25.2818 37.6991 26.5934 41.9501 30.8561L46.3129 24.626H52.3537V94.9059C52.3537 98.7314 53.4724 99.9337 57.164 99.9337H59.9606V105.071H29.9803ZM14.4308 50.4208C14.4308 62.3345 20.8072 68.7832 28.4142 68.7832C32.5533 68.7832 36.0211 67.1437 38.2585 64.3019V42.6605C38.2585 35.2281 33.1126 32.6049 27.8548 32.6049C20.2479 32.6049 14.4308 38.3978 14.4308 50.4208Z" fill="currentColor"/>
<path d="M78.3625 78.4016C68.2945 78.4016 62.7011 72.3901 62.7011 63.3182V35.8839C62.7011 32.7142 61.0231 31.2933 57.6671 31.2933H55.2061V26.1562H76.7964V59.3834C76.7964 65.1763 80.488 68.0181 84.9626 68.0181C89.9967 68.0181 96.0375 64.4112 96.0375 57.3067V35.8839C96.0375 32.7142 94.3595 31.2933 90.8916 31.2933H87.5356V26.1562H110.133V66.9251C110.133 70.2041 111.699 71.4064 115.055 71.4064H117.516V76.6528H96.2612V69.0018H95.8137C93.0171 74.1389 86.8644 78.4016 78.3625 78.4016Z" fill="currentColor"/>
<path d="M120.066 76.6528V71.4064H122.639C126.219 71.4064 127.897 69.8762 127.897 66.8158V35.8839C127.897 32.6049 126.666 31.2933 123.31 31.2933H120.066V26.1562H149.711V31.2933H146.579C143.111 31.2933 141.992 32.6049 141.992 35.8839V66.8158C141.992 69.8762 143.67 71.4064 147.25 71.4064H149.711V76.6528H120.066Z" fill="currentColor"/>
<path d="M152.121 105.071V99.9337H155.03C158.498 99.9337 159.616 98.6221 159.616 95.3431V36.1025C159.616 32.7142 158.162 31.2933 154.47 31.2933H152.457V26.1562H173.152L173.488 33.4793H174.047C177.291 28.7794 183.22 25.2818 190.715 25.2818C203.356 25.2818 212.082 35.3374 212.082 50.3115C212.082 68.1274 199.105 78.4016 185.01 78.4016C180.759 78.4016 176.844 77.4179 173.712 75.4505V95.3431C173.712 98.6221 174.942 99.9337 178.298 99.9337H182.213V105.071H152.121ZM173.712 60.9136C173.712 68.346 178.969 70.9692 184.227 70.9692C191.834 70.9692 197.539 65.1763 197.539 53.1533C197.539 41.2396 191.275 34.7909 183.668 34.7909C179.529 34.7909 176.061 36.4304 173.712 39.3815V60.9136Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M321.271 5.47445C322.032 5.0428 322.955 5.57248 323.09 6.3224C323.091 6.32628 323.096 6.32655 323.097 6.32272C323.099 6.31833 323.105 6.31974 323.105 6.32428C323.103 6.34225 323.1 6.36038 323.098 6.37837V6.38025C323.115 6.5118 323.107 6.64924 323.069 6.78891C323.05 6.86034 323.031 6.93194 323.021 7.00527C322.989 7.26132 322.954 7.52093 322.917 7.78351C322.906 7.85834 322.908 7.93466 322.9 8.00988C322.898 8.03536 322.894 8.06124 322.888 8.08742C322.873 8.15382 322.854 8.21713 322.844 8.2844C320.291 25.3798 312.365 55.1549 302.309 55.3027C312.761 55.4599 323.089 87.7134 323.111 104.053C323.11 104.06 323.101 104.06 323.099 104.054C323.097 104.048 323.088 104.049 323.087 104.055C322.944 104.798 322.027 105.318 321.271 104.889C319.358 103.803 317.047 102.613 314.551 101.327C304.617 96.2118 291.74 89.5808 289.239 81.908C289.123 81.5509 288.83 81.2748 288.462 81.1998C284.033 80.2969 280.783 78.5915 278.4 76.3941C277.996 76.0224 277.364 76.0222 277.006 76.4375C275.425 78.2706 274.028 80.4359 273.091 82.1187C272.692 82.8344 271.578 82.8491 271.171 82.1384C270.206 80.4569 268.784 78.2671 267.153 76.4244C266.794 76.0179 266.169 76.0226 265.77 76.3906C263.386 78.5898 260.135 80.2965 255.703 81.1998C255.336 81.2748 255.043 81.5509 254.926 81.908C252.426 89.5808 239.549 96.2115 229.615 101.327C227.119 102.613 224.808 103.803 222.895 104.889C222.141 105.317 221.226 104.8 221.08 104.06C221.079 104.054 221.071 104.054 221.069 104.059C221.068 104.065 221.059 104.064 221.059 104.058C221.059 104.005 221.06 103.951 221.06 103.898C221.059 103.865 221.059 103.832 221.061 103.798C221.222 87.3799 231.462 55.4603 241.86 55.3039C231.807 55.1562 223.885 25.4003 221.328 8.30223C221.317 8.23026 221.296 8.16275 221.28 8.0918C221.273 8.06363 221.269 8.03568 221.266 8.00832C221.259 7.92871 221.261 7.84799 221.25 7.76881C221.215 7.51775 221.181 7.26944 221.15 7.02435C221.14 6.94732 221.119 6.87222 221.098 6.79735C221.057 6.64966 221.049 6.50432 221.068 6.36587V6.36399C221.067 6.34939 221.065 6.33479 221.063 6.32022C221.063 6.31616 221.069 6.31474 221.07 6.31865C221.071 6.322 221.076 6.32177 221.077 6.31834C221.214 5.57053 222.136 5.0435 222.895 5.47445C224.808 6.56107 227.119 7.75112 229.615 9.03669C239.549 14.1521 252.426 20.7832 254.926 28.4559C255.043 28.8131 255.336 29.0892 255.703 29.1641C260.218 30.0844 263.508 31.8382 265.903 34.0971C266.304 34.4755 266.941 34.4807 267.302 34.0643C268.87 32.2586 270.235 30.1516 271.17 28.5219C271.578 27.8114 272.692 27.8261 273.091 28.5416C274 30.1717 275.339 32.2544 276.859 34.0493C277.219 34.4742 277.863 34.4736 278.268 34.0918C280.663 31.8354 283.951 30.0837 288.463 29.1641C288.83 29.0891 289.123 28.813 289.239 28.4559C291.74 20.7831 304.617 14.1521 314.551 9.03669C317.047 7.75113 319.358 6.56107 321.271 5.47445ZM268.733 60.9185C268.855 60.1338 268.194 59.467 267.408 59.5722C265.297 59.8545 263.43 60.3681 261.889 61.2124C259.966 62.2666 258.395 63.9135 257.501 66.7654C257.082 68.1024 255.923 69.0641 254.545 69.2327L254.412 69.2468C252.173 69.435 249.637 70.5199 246.865 72.5661C244.112 74.5986 241.328 77.4307 238.635 80.7665C238.007 81.5443 237.388 82.3446 236.779 83.1621C235.92 84.3163 237.425 85.7611 238.637 84.9859C243.105 82.1268 248.01 79.7201 253.177 78.2989C263.83 75.369 267.743 67.2975 268.733 60.9185ZM276.584 59.5722C275.798 59.467 275.137 60.1339 275.259 60.9185C276.249 67.2975 280.162 75.369 290.815 78.2989C295.982 79.7201 300.887 82.1269 305.355 84.9859C306.567 85.7612 308.072 84.3163 307.213 83.1621C306.604 82.3446 305.985 81.5443 305.357 80.7665C302.664 77.4307 299.88 74.5986 297.127 72.5661C294.355 70.52 291.819 69.435 289.58 69.2468L289.446 69.2327C288.069 69.064 286.91 68.1023 286.491 66.7654C285.597 63.9135 284.026 62.2666 282.102 61.2124C280.562 60.3682 278.695 59.8545 276.584 59.5722ZM299.855 62.3837C299.602 61.3685 296.996 62.1146 296.27 62.8668C295.523 63.6395 296.604 66.7061 297.545 67.2254C298.084 67.5231 298.617 67.8454 299.145 68.19C300.038 68.7732 301.534 67.6198 301.164 66.6188C300.584 65.0464 300.166 63.6299 299.855 62.3837ZM247.904 62.8727C247.176 62.1199 244.566 61.3756 244.312 62.3921C244.002 63.6359 243.584 65.0491 243.005 66.6175C242.636 67.6184 244.131 68.7712 245.024 68.1881C245.554 67.8421 246.089 67.5188 246.631 67.2201C247.572 66.7008 248.652 63.6458 247.904 62.8727ZM256.505 50.2205C255.824 49.4223 253.032 49.6155 252.378 50.4363C250.348 52.9873 247.078 54.6555 245.2 55.2605C245.192 55.2629 245.186 55.2674 245.181 55.2733C245.165 55.2911 245.166 55.3183 245.181 55.3361C245.187 55.342 245.193 55.3468 245.2 55.3493C247.08 55.9548 250.355 57.5932 252.385 60.1256C253.039 60.9418 255.783 61.1243 256.457 60.3241C259.516 56.6915 264.243 55.5414 269.001 55.247C264.268 54.953 259.566 53.8102 256.505 50.2205ZM291.796 50.4428C291.142 49.6222 288.337 49.4285 287.656 50.2268C284.595 53.8114 279.896 54.9532 275.166 55.247C279.92 55.5412 284.642 56.6897 287.702 60.3154C288.377 61.1155 291.135 60.9324 291.791 60.1162C293.821 57.5887 297.091 55.9532 298.969 55.3483C298.976 55.3459 298.983 55.3411 298.988 55.3352C299.004 55.3173 299.004 55.29 298.988 55.272C298.983 55.2661 298.977 55.2616 298.969 55.2592C297.093 54.6548 293.827 52.9894 291.796 50.4428ZM238.637 25.3374C237.425 24.5623 235.92 26.007 236.779 27.1612C237.388 27.9787 238.007 28.779 238.635 29.5569C241.328 32.8927 244.112 35.725 246.865 37.7575C249.637 39.8037 252.173 40.8883 254.412 41.0765L254.545 41.0906C255.923 41.2592 257.082 42.2212 257.501 43.5582C258.395 46.41 259.966 48.0567 261.889 49.1109C263.43 49.9552 265.297 50.4688 267.408 50.7511C268.194 50.8563 268.855 50.1897 268.733 49.4051C267.743 43.0261 263.83 34.9543 253.177 32.0244C248.01 30.6032 243.105 28.1965 238.637 25.3374ZM307.213 27.1612C308.072 26.007 306.567 24.5621 305.355 25.3374C300.887 28.1964 295.982 30.6032 290.815 32.0244C280.162 34.9543 276.249 43.0261 275.259 49.4051C275.137 50.1897 275.798 50.8563 276.584 50.7511C278.695 50.4688 280.562 49.9551 282.102 49.1109C284.026 48.0567 285.597 46.4101 286.491 43.5582C286.91 42.2213 288.069 41.2593 289.446 41.0906L289.58 41.0765C291.819 40.8883 294.355 39.8037 297.127 37.7575C299.88 35.725 302.664 32.8927 305.357 29.5569C305.985 28.779 306.604 27.9787 307.213 27.1612ZM244.994 42.1562C244.09 41.564 242.52 42.7809 242.904 43.7918C243.702 45.892 244.206 47.7124 244.547 49.2281C244.731 50.043 246.233 50.1287 246.649 49.4042C248.051 46.9568 250.131 45.8512 251.894 45.5111C252.016 45.4875 252.03 45.2045 251.909 45.1744C249.509 44.6515 247.199 43.6003 244.994 42.1562ZM301.264 43.7905C301.648 42.7796 300.078 41.5622 299.173 42.1546C296.972 43.5967 294.667 44.6472 292.271 45.1712C292.148 45.2018 292.161 45.4875 292.285 45.5117C294.043 45.8535 296.113 46.9563 297.513 49.3898C297.931 50.1163 299.441 50.0302 299.625 49.2125C299.966 47.6997 300.469 45.8841 301.264 43.7905Z" fill="currentColor"/>
</symbol>
</svg>
<nav class="doc-nav" aria-label="Section navigation">
<div class="doc-nav-inner">
<a href="#top" class="doc-nav-brand"><span class="grad">QTW Trading Competition</span></a>
<ul class="doc-nav-list">
<li><a href="#tldr"><span class="num">01</span>Overview</a></li>
<li><a href="#inspiration"><span class="num">02</span>Refs</a></li>
<li><a href="#flow"><span class="num">03</span>Flow</a></li>
<li><a href="#mockups"><span class="num">04</span>Mockups</a></li>
<li><a href="#assets"><span class="num">05</span>Assets</a></li>
<li><a href="#bigscreen"><span class="num">06</span>Big screen</a></li>
<li><a href="#scope"><span class="num">07</span>Scope</a></li>
<li><a href="#params"><span class="num">08</span>Sliders</a></li>
<li><a href="#arch"><span class="num">09</span>Arch</a></li>
<li><a href="#api"><span class="num">10</span>API</a></li>
<li><a href="#hardware"><span class="num">11</span>Hardware</a></li>
<li><a href="#playground"><span class="num">12</span>Playground</a></li>
<li><a href="#tbd"><span class="num">13</span>TBDs</a></li>
</ul>
</div>
</nav>
<div class="page" id="top">
<!-- ================================================ HERO -->
<header class="hero">
<div class="kicker">Design doc · Quantum.Tech World 2026 · 2026-05-08</div>
<div class="hero-title-row">
<h1>The Quip Network<br><span class="grad">Trading Competition</span></h1>
<canvas id="hero-glyph" width="160" height="160"></canvas>
</div>
<p class="lede">Design doc for the two-day booth demo. Attendees create a trading agent at a kiosk; Quip Network routes the resulting portfolio-optimization job across quantum and classical providers. A leaderboard tracks P&L over the conference and surfaces which provider solved each job.</p>
<div class="hero-facts">
<div><span>Format</span><strong>Booth kiosk + phone profile</strong></div>
<div><span>Dates</span><strong>Jun 25–26, 2026 · continuous</strong></div>
<div><span>Prize tier</span><strong>Top 10 win</strong></div>
<div><span>Modeled after</span><strong>Base @ Consensys Miami</strong></div>
</div>
</header>
<!-- ================================================ TL;DR -->
<section id="tldr">
<div class="kicker">01 · Overview</div>
<h2>What we're building</h2>
<div class="grid-2">
<div>
<p class="lede">Attendees walk up to a kiosk, name an agent, pick their asset basket, set three strategy sliders, and submit. That submission is the competition entry. We're building a similar activation to <a href="#inspiration">Base + Coinbase at Consensys Miami</a> — see the reference screens below for context.</p>
<p>The basket and sliders parameterize a <strong>portfolio optimization problem</strong>. The server dispatches the job to Quip Network, which routes it to available providers — D-Wave (quantum) and one or more classical solvers. The first provider to return a valid optimum wins the job, and that solution becomes the agent's portfolio until the next retune.</p>
<p>Each attendee receives a <strong>QR-coded profile URL</strong> for use on their phone for the duration of the conference. The phone profile shows live P&L and lets the user adjust sliders; every adjustment triggers a new optimization through Quip Network.</p>
</div>
<div class="card dark">
<h3 style="color: white;">Rationale</h3>
<ul style="margin-left: 18px; margin-top: 14px;">
<li>The demo runs the production routing layer live, with quantum hardware solving customer-shaped problems in view of attendees and passers-by.</li>
<li>Each solved job shows which provider responded fastest. Results display the winning provider; D-Wave wins ~80% of jobs in expectation. The provider badge is the same surface shown to production customers.</li>
<li>Surfaces: kiosk, phone profile, booth-TV leaderboard.</li>
<li>Each retune triggers a new routing job, so active players generate more live data. Replaces <a href="#inspiration">Base's LLM-generated strategy step</a> with a real routing call, so every interaction exercises the product directly.</li>
<li>Format follows <a href="#inspiration">Base + Coinbase at Consensys Miami</a>, which used a similar setup and saw sustained booth traffic.</li>
</ul>
</div>
</div>
</section>
<!-- ================================================ INSPIRATION (moved from end for context) -->
<section id="inspiration">
<div class="kicker">02 · Reference</div>
<h2>Reference: Base activation at Consensys Miami</h2>
<p class="lede">We're building a similar activation inspired by this event. Layout patterns drawn on: the bottom-screen ticker, the character system, and the trollbox.</p>
<p class="small" style="margin-top: 14px;">Click any thumbnail to enlarge. Press <kbd style="font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; padding: 1px 5px; border: 1px solid var(--zinc-300); border-radius: 3px; background: var(--zinc-100);">Esc</kbd> to close.</p>
<div class="gallery" style="margin-top: 14px;">
<button class="thumb" data-img="reference-files/IMG_3898 2.png" data-cap="Sign-up kiosk · Base. Single ASUS laptop, single screen, simple stand.">
<img src="reference-files/IMG_3898 2.png" alt="Base sign-up kiosk laptop" loading="lazy">
<div class="cap">Sign-up kiosk</div>
</button>
<button class="thumb" data-img="reference-files/IMG_3898 1.png" data-cap="Sign-up TV output · Base. The kiosk's sign-up flow mirrored on a screen behind the booth — sliders, persona prompt, supported-assets sidebar. Our equivalent uses a basket selector + 3 sliders with Quip-branded styling and a generative glyph in place of the cartoon avatar.">
<img src="reference-files/IMG_3898 1.png" alt="Base sign-up flow on a TV output" loading="lazy">
<div class="cap">Sign-up TV output</div>
</button>
<button class="thumb" data-img="reference-files/IMG_3894 1.png" data-cap="Agent profile · Base. Persona, portfolio split, slider readout, QR. Our analog is the post-launch confirmation + phone profile, but with a routing-provenance card as the hero element.">
<img src="reference-files/IMG_3894 1.png" alt="Base agent profile page" loading="lazy">
<div class="cap">Agent profile</div>
</button>
<button class="thumb" data-img="reference-files/IMG_3897 1.png" data-cap="Big-screen leaderboard · Base. Top 10 with avatars, names, value, % change. Our version replaces avatars with each player's pattern glyph; structure is otherwise nearly identical.">
<img src="reference-files/IMG_3897 1.png" alt="Base big-screen leaderboard" loading="lazy">
<div class="cap">Big-screen leaderboard</div>
</button>
<button class="thumb" data-img="reference-files/IMG_3895 1.png" data-cap="Big-screen spotlight · Base. Featured agent, P&L, holdings, latest trades, and the trollbox sidebar. We keep the spotlight, drop the trollbox, and add a '% of jobs solved by D-Wave' stat.">
<img src="reference-files/IMG_3895 1.png" alt="Base agent spotlight on big screen" loading="lazy">
<div class="cap">Big-screen spotlight</div>
</button>
</div>
</section>
<!-- ================================================ FLOW -->
<section id="flow">
<div class="kicker">03 · Attendee flow</div>
<h2>End-to-end attendee path</h2>
<!-- SVG flow diagram -->
<svg viewBox="0 0 1100 220" style="width: 100%; height: auto;" role="img" aria-label="Five-step user flow">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#ff6467"/>
</marker>
</defs>
<!-- 5 steps -->
<g font-family="Inter, system-ui, sans-serif">
<!-- 1 -->
<rect x="0" y="40" width="200" height="140" rx="8" fill="white" stroke="#e4e4e7"/>
<text x="14" y="62" font-size="11" font-family="JetBrains Mono, monospace" fill="#71717a">STEP 01 · BOOTH</text>
<text x="14" y="92" font-size="15" font-weight="600" fill="#09090b">Sign up</text>
<text x="14" y="112" font-size="12" fill="#52525b">Name + email</text>
<text x="14" y="128" font-size="12" fill="#52525b">at the kiosk laptop</text>
<text x="14" y="160" font-size="11" fill="#a1a1aa">~20 sec</text>
<!-- arrow -->
<line x1="208" y1="110" x2="226" y2="110" stroke="#ff6467" stroke-width="2" marker-end="url(#arrow)"/>
<!-- 2 -->
<rect x="232" y="40" width="200" height="140" rx="8" fill="white" stroke="#e4e4e7"/>
<text x="246" y="62" font-size="11" font-family="JetBrains Mono, monospace" fill="#71717a">STEP 02 · BOOTH</text>
<text x="246" y="92" font-size="15" font-weight="600" fill="#09090b">Pick basket, tune sliders</text>
<text x="246" y="112" font-size="12" fill="#52525b">28 assets · Activity,</text>
<text x="246" y="128" font-size="12" fill="#52525b">Risk, Position cap</text>
<text x="246" y="160" font-size="11" fill="#a1a1aa">~30 sec</text>
<line x1="440" y1="110" x2="458" y2="110" stroke="#ff6467" stroke-width="2" marker-end="url(#arrow)"/>
<!-- 3 -->
<rect x="464" y="40" width="200" height="140" rx="8" fill="#27272a" stroke="#27272a"/>
<text x="478" y="62" font-size="11" font-family="JetBrains Mono, monospace" fill="#a1a1aa">STEP 03 · QUIP NETWORK</text>
<text x="478" y="92" font-size="15" font-weight="600" fill="white">Optimize</text>
<text x="478" y="112" font-size="12" fill="#d4d4d8">Job routes to D-Wave +</text>
<text x="478" y="128" font-size="12" fill="#d4d4d8">classical solvers; fastest wins</text>
<text x="478" y="160" font-size="11" fill="#ff6467">~1–3 sec (quantum) ★</text>
<line x1="672" y1="110" x2="690" y2="110" stroke="#ff6467" stroke-width="2" marker-end="url(#arrow)"/>
<!-- 4 -->
<rect x="696" y="40" width="200" height="140" rx="8" fill="white" stroke="#e4e4e7"/>
<text x="710" y="62" font-size="11" font-family="JetBrains Mono, monospace" fill="#71717a">STEP 04 · ANYWHERE</text>
<text x="710" y="92" font-size="15" font-weight="600" fill="#09090b">Track on phone</text>
<text x="710" y="112" font-size="12" fill="#52525b">QR code → profile link.</text>
<text x="710" y="128" font-size="12" fill="#52525b">Live P&L, adjust anytime.</text>
<text x="710" y="160" font-size="11" fill="#a1a1aa">2 days</text>
<line x1="904" y1="110" x2="922" y2="110" stroke="#ff6467" stroke-width="2" marker-end="url(#arrow)"/>
<!-- 5 -->
<rect x="928" y="40" width="172" height="140" rx="8" fill="#fff0f0" stroke="#ff6467" stroke-width="2"/>
<text x="942" y="62" font-size="11" font-family="JetBrains Mono, monospace" fill="#ff6467">STEP 05 · DAY 2 CLOSE</text>
<text x="942" y="92" font-size="15" font-weight="600" fill="#09090b">Top 10 win</text>
<text x="942" y="112" font-size="12" fill="#52525b">Best P&L at end of</text>
<text x="942" y="128" font-size="12" fill="#52525b">final session takes prize.</text>
</g>
</svg>
<p class="small" style="margin-top: 18px;">★ Each slider adjustment dispatches a new routing job to Quip Network. Each user is expected to generate multiple jobs over two days.</p>
</section>
<!-- ================================================ MOCKUPS -->
<section id="mockups">
<div class="kicker">04 · Screen mockups</div>
<h2>User-facing surfaces</h2>
<p class="lede">Three surfaces, shown in order: the kiosk sign-up screen, the post-launch confirmation, and the personal phone profile.</p>
<h3 style="margin-top: 36px; margin-bottom: 8px;">Kiosk · Sign-up & tune</h3>
<p class="small" style="margin-bottom: 6px;">Single-page iPad kiosk (9.7", 1024×768). The user picks their tradable basket from the 28-asset universe (14 crypto + 14 stocks), enters an agent name and email, adjusts three strategy sliders, and submits. The panel on the right previews the generative glyph used as the agent's identity on the leaderboard.</p>
<p class="small" style="margin-bottom: 12px; color: var(--zinc-500);"><span class="interactive-tag">Live</span> Toggle assets (All / Clear / Auto-pick), type a name and drag the sliders below; the panels update in real time.</p>
<div class="mockup-frame kiosk">
<div class="chrome"><span class="net-status">Quip Network · Online</span></div>
<div class="screen" style="padding: 0;">
<!-- doc-stage: true 9.7" iPad canvas (1024×768) scaled to the doc column -->
<div class="doc-stage"><div class="doc-stage-canvas">
<div class="qs-v4-mock kiosk-v4 app-fit">
<!-- v4 nav: wordmark + eyebrow + gradient pill -->
<div class="v4m-nav">
<div class="v4m-mark">
<svg class="quip-wm"><use href="#quip-wm"/></svg>
<div class="v4m-nav-divider"></div>
<span class="v4m-eyebrow">Quantum.Tech World 2026 · Trading Competition</span>
</div>
<span class="v4m-pill">Live · Sign-up</span>
</div>
<!-- v4 hero: "Create your trading agent." -->
<div class="v4m-hero">
<h1>Create your <span class="it">trading agent.</span></h1>
</div>
<!-- Selector-top body: basket + slider band (left), identity rail (right) -->
<div class="v4m-body selector-top">
<div class="v4m-main-col">
<!-- Asset selector — the player's tradable basket (14 crypto + 14 stocks) -->
<div class="v4m-mega v4m-selector-mega" aria-label="Asset selector">
<div class="v4m-mega-section v4m-selector-section">
<div class="v4m-selector-head">
<span class="v4m-section-eyebrow eyebrow-step"><span class="v4m-step-chip">1</span>Pick your basket <span class="v4m-selector-req">· min 3</span></span>
<span class="v4m-selector-count" id="kiosk-basket-count">0/28</span>
</div>
<div class="v4m-selector-actions">
<button type="button" class="v4m-selector-btn" data-basket-action="all">All</button>
<button type="button" class="v4m-selector-btn" data-basket-action="none">Clear</button>
<button type="button" class="v4m-selector-btn accent" data-basket-action="auto">Auto-pick</button>
</div>
<div class="v4m-pick-list" id="kiosk-pick-list">
<div class="v4m-pick-group-label">Crypto · 14</div>
<div class="v4m-pick-grid">
<button type="button" class="v4m-tile crypto" data-pick="BTC" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/btc.svg" alt=""><span class="v4m-tile-ticker">BTC</span><span class="v4m-tile-name">Bitcoin</span></button>
<button type="button" class="v4m-tile crypto" data-pick="ETH" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/eth.svg" alt=""><span class="v4m-tile-ticker">ETH</span><span class="v4m-tile-name">Ethereum</span></button>
<button type="button" class="v4m-tile crypto" data-pick="BNB" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/bnb.svg" alt=""><span class="v4m-tile-ticker">BNB</span><span class="v4m-tile-name">BNB</span></button>
<button type="button" class="v4m-tile crypto" data-pick="SOL" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/sol.png" alt=""><span class="v4m-tile-ticker">SOL</span><span class="v4m-tile-name">Solana</span></button>
<button type="button" class="v4m-tile crypto" data-pick="XRP" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/xrp.svg" alt=""><span class="v4m-tile-ticker">XRP</span><span class="v4m-tile-name">XRP</span></button>
<button type="button" class="v4m-tile crypto" data-pick="USDT" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/usdt.svg" alt=""><span class="v4m-tile-ticker">USDT</span><span class="v4m-tile-name">Tether</span></button>
<button type="button" class="v4m-tile crypto" data-pick="USDC" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/usdc.svg" alt=""><span class="v4m-tile-ticker">USDC</span><span class="v4m-tile-name">USD Coin</span></button>
<button type="button" class="v4m-tile crypto" data-pick="DOGE" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/doge.svg" alt=""><span class="v4m-tile-ticker">DOGE</span><span class="v4m-tile-name">Dogecoin</span></button>
<button type="button" class="v4m-tile crypto" data-pick="HYPE" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/hype.png" alt=""><span class="v4m-tile-ticker">HYPE</span><span class="v4m-tile-name">Hyperliquid</span></button>
<button type="button" class="v4m-tile crypto" data-pick="ZEC" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/zec.svg" alt=""><span class="v4m-tile-ticker">ZEC</span><span class="v4m-tile-name">Zcash</span></button>
<button type="button" class="v4m-tile crypto" data-pick="ALGO" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/algo.svg" alt=""><span class="v4m-tile-ticker">ALGO</span><span class="v4m-tile-name">Algorand</span></button>
<button type="button" class="v4m-tile crypto" data-pick="FIL" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/fil.svg" alt=""><span class="v4m-tile-ticker">FIL</span><span class="v4m-tile-name">Filecoin</span></button>
<button type="button" class="v4m-tile crypto" data-pick="RENDER" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/render.png" alt=""><span class="v4m-tile-ticker">RENDER</span><span class="v4m-tile-name">Render</span></button>
<button type="button" class="v4m-tile crypto" data-pick="STRK" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/strk.png" alt=""><span class="v4m-tile-ticker">STRK</span><span class="v4m-tile-name">Starknet</span></button>
</div>
<div class="v4m-pick-group-label">Stocks · 14</div>
<div class="v4m-pick-grid">
<button type="button" class="v4m-tile stock" data-pick="IONQ" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/ionq.png" alt=""><span class="v4m-tile-ticker">IONQ</span><span class="v4m-tile-name">IonQ</span></button>
<button type="button" class="v4m-tile stock" data-pick="RGTI" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/rgti.png" alt=""><span class="v4m-tile-ticker">RGTI</span><span class="v4m-tile-name">Rigetti Computing</span></button>
<button type="button" class="v4m-tile stock" data-pick="QBTS" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/qbts.png" alt=""><span class="v4m-tile-ticker">QBTS</span><span class="v4m-tile-name">D-Wave Quantum</span></button>
<button type="button" class="v4m-tile stock" data-pick="QUBT" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/qubt.png" alt=""><span class="v4m-tile-ticker">QUBT</span><span class="v4m-tile-name">Quantum Computing</span></button>
<button type="button" class="v4m-tile stock" data-pick="ARQQ" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/arqq.png" alt=""><span class="v4m-tile-ticker">ARQQ</span><span class="v4m-tile-name">Arqit Quantum</span></button>
<button type="button" class="v4m-tile stock" data-pick="LAES" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/laes.png" alt=""><span class="v4m-tile-ticker">LAES</span><span class="v4m-tile-name">SEALSQ</span></button>
<button type="button" class="v4m-tile stock" data-pick="IBM" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/ibm.png" alt=""><span class="v4m-tile-ticker">IBM</span><span class="v4m-tile-name">IBM</span></button>
<button type="button" class="v4m-tile stock" data-pick="GOOGL" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/googl.png" alt=""><span class="v4m-tile-ticker">GOOGL</span><span class="v4m-tile-name">Alphabet</span></button>
<button type="button" class="v4m-tile stock" data-pick="NVDA" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/nvda.png" alt=""><span class="v4m-tile-ticker">NVDA</span><span class="v4m-tile-name">NVIDIA</span></button>
<button type="button" class="v4m-tile stock" data-pick="MSFT" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/msft.png" alt=""><span class="v4m-tile-ticker">MSFT</span><span class="v4m-tile-name">Microsoft</span></button>
<button type="button" class="v4m-tile stock" data-pick="AMZN" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/amzn.png" alt=""><span class="v4m-tile-ticker">AMZN</span><span class="v4m-tile-name">Amazon</span></button>
<button type="button" class="v4m-tile stock" data-pick="HON" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/hon.png" alt=""><span class="v4m-tile-ticker">HON</span><span class="v4m-tile-name">Honeywell</span></button>
<button type="button" class="v4m-tile stock" data-pick="SAF" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/saf.png" alt=""><span class="v4m-tile-ticker">SAF</span><span class="v4m-tile-name">Safran</span></button>
<button type="button" class="v4m-tile stock" data-pick="SPCX" aria-pressed="false"><span class="v4m-tile-check" aria-hidden="true">✓</span><img class="v4m-tile-icon" src="shared-design/asset-icons/spcx.png" alt=""><span class="v4m-tile-ticker">SPCX</span><span class="v4m-tile-name">SpaceX</span></button>
</div>
</div>
</div>
</div>
<!-- 3 strategy sliders — horizontal band beneath the basket -->
<div class="v4m-mega v4m-sliders-mega" aria-label="Strategy sliders">
<div class="v4m-mega-section">
<div class="v4m-sliders-head">
<span class="v4m-section-eyebrow eyebrow-step"><span class="v4m-step-chip">2</span>Tune your strategy</span>
</div>
<div class="v4m-sliders-row">
<div class="v4m-slider">
<div class="v4m-slider-top">
<span class="v4m-slider-label">Rebalance frequency</span>
</div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-kiosk-track="0" style="width: 70%"></div>
<div class="v4m-slider-knob" data-kiosk-knob="0" style="left: 70%"></div>
</div>
<input type="range" class="range-overlay" data-kiosk="0" min="0" max="100" value="70" />
</div>
<div class="v4m-slider-bottom">
<span class="v4m-slider-val" data-kiosk-label="0">Every 2h</span>
</div>
</div>
<div class="v4m-slider">
<div class="v4m-slider-top">
<span class="v4m-slider-label">Risk preference</span>
</div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-kiosk-track="1" style="width: 78%"></div>
<div class="v4m-slider-knob" data-kiosk-knob="1" style="left: 78%"></div>
</div>
<input type="range" class="range-overlay" data-kiosk="1" min="0" max="100" value="78" />
</div>
<div class="v4m-slider-bottom">
<span class="v4m-slider-val" data-kiosk-label="1">Aggressive</span>
</div>
</div>
<div class="v4m-slider">
<div class="v4m-slider-top">
<span class="v4m-slider-label">Max position size</span>
</div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-kiosk-track="2" style="width: 50%"></div>
<div class="v4m-slider-knob" data-kiosk-knob="2" style="left: 50%"></div>
</div>
<input type="range" class="range-overlay" data-kiosk="2" min="0" max="100" value="50" />
</div>
<div class="v4m-slider-bottom">
<span class="v4m-slider-val" data-kiosk-label="2">Medium</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- v4-mega rail: step 3 details card + agent identity card -->
<aside class="v4m-rail-col" aria-label="Your details and agent">
<div class="v4m-mega">
<div class="v4m-mega-section">
<span class="v4m-section-eyebrow eyebrow-step"><span class="v4m-step-chip">3</span>Your details</span>
<div class="v4m-field">
<label for="kiosk-name">Player name (required)</label>
<input class="v4m-input" id="kiosk-name" type="text" value="Lattice Theory" />
</div>
<div class="v4m-field">
<label for="kiosk-email">Email (required)</label>
<input class="v4m-input" id="kiosk-email" type="email" placeholder="you@example.com" />
<div class="v4m-field-hint">So we can reach you if you win</div>
</div>
<button type="button" class="v4m-check-row v4m-optin-row" data-optin><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Sign me up for updates from Quip Network</span></button>
<div class="v4m-field v4m-field-checklist">
<label>Would you like someone from our team to reach out?<span class="opt">Optional</span></label>
<div class="v4m-checklist">
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to learn about quantum computing</span></button>
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to buy compute</span></button>
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to provide compute</span></button>
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to build quantum applications</span></button>
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to partner with Quip Network</span></button>
<button type="button" class="v4m-check-row"><span class="v4m-check-box" aria-hidden="true"></span><span class="v4m-check-label">Yes, to learn about post-quantum cryptography</span></button>
</div>
</div>
</div>
</div>
</aside>
</div>
<!-- CTA strip -->
<div class="v4m-cta-bar">
<button class="v4m-cta" id="kiosk-launch">
<span class="v4m-cta-label"><span class="v4m-step-chip cta">4</span>Create your agent</span>
<span class="v4m-cta-arrow">→</span>
</button>
<div class="v4m-cta-sub" id="kiosk-cta-sub" style="display: none;"></div>
</div>
</div>
</div></div>
</div>
</div>
<h3 style="margin-top: 50px; margin-bottom: 14px;">Kiosk · Strategy returned <span class="interactive-tag" style="margin-left: 8px;">Live · click replay</span></h3>
<p class="small" style="margin-bottom: 12px;">After the user submits, the kiosk displays this confirmation screen for ~5 seconds. The primary panel shows the routing result: provider, solve time, and the quantum-vs-classical race. The portfolio below is a <strong>true simulation</strong> — it computes from the basket and sliders set in the sign-up mock above, but only when you press <strong>Create your agent</strong> (and at least 3 assets are selected). Set a basket, hit Create, and watch it allocate. The big-screen welcome splash fires on the same event.</p>
<div class="mockup-frame kiosk">
<div class="chrome"><span class="net-status">Quip Network · Routed</span></div>
<div class="screen" style="padding: 0;">
<!-- doc-stage: true 9.7" iPad canvas (1024×768) scaled to the doc column -->
<div class="doc-stage"><div class="doc-stage-canvas">
<div class="qs-v4-mock kiosk-welcome-v4 app-fit" id="kiosk-routing-hero">
<!-- v4 nav -->
<div class="v4m-nav">
<div class="v4m-mark">
<svg class="quip-wm"><use href="#quip-wm"/></svg>
<div class="v4m-nav-divider"></div>
<span class="v4m-eyebrow">Quantum.Tech World 2026 · Trading Competition</span>
</div>
<span class="v4m-pill">Live · Sign-up</span>
</div>
<!-- v4 hero -->
<div class="v4m-hero">
<h1>Welcome to <span class="it">the competition.</span></h1>
</div>
<!-- 2-section v4 body -->
<div class="v4m-body">
<!-- Main: solver outcome panel -->
<section class="v4m-main">
<div style="margin-bottom: 4px;">
<span class="v4m-section-eyebrow cyan-dot cyan" id="kiosk-route-pill">Routed via Quip Network · Solved <span id="kiosk-route-ago">Just Now</span></span>
</div>
<span class="v4m-route-tag" id="kiosk-route-tag">QPU</span>
<div class="v4m-main-hero" id="kiosk-route-name">D-Wave <span class="it accent">Advantage.</span></div>
<div class="v4m-panel-meta" id="kiosk-route-meta" style="margin-top: 6px;"></div>
<!-- Big italic Georgia numerals — solve time + vs classical -->
<div class="v4m-stat-row">
<div>
<div class="v4m-stat-big" id="kiosk-route-time" style="color: #0891B2;">0.42s</div>
<span class="v4m-stat-lbl">Solve Time</span>
</div>
<div>
<div class="v4m-stat-mid" id="kiosk-route-vs">14×</div>
<span class="v4m-stat-lbl">Vs Classical</span>
</div>
</div>
<!-- Race bars -->
<div class="v4m-race">
<div class="v4m-race-row">
<span class="v4m-race-label q">D-Wave · QPU</span>
<div class="v4m-race-bar"><div class="v4m-race-fill q" id="kiosk-bar-q" style="width: 7%"></div></div>
<span class="v4m-race-time" id="kiosk-time-q">0.42s</span>
</div>
<div class="v4m-race-row">
<span class="v4m-race-label">Classical baseline</span>
<div class="v4m-race-bar"><div class="v4m-race-fill" id="kiosk-bar-c" style="width: 100%"></div></div>
<span class="v4m-race-time" id="kiosk-time-c">5.88s</span>
</div>
</div>
</section>
<!-- Combined agent panel: identity + strategy + portfolio + QR -->
<aside class="v4m-mega v4m-agent-panel">
<!-- Header: glyph + name on the left; bankroll on the right -->
<div class="v4m-agent-header">
<canvas id="welcome-strat-glyph" class="v4m-agent-glyph" width="220" height="220" aria-label="Your generated agent glyph"></canvas>
<div class="v4m-agent-ident">
<div class="v4m-agent-name" id="strat-name">Lattice Theory.</div>
</div>
<div class="v4m-agent-bankroll">
<div class="v4m-agent-bankroll-lbl">Bankroll</div>
<div class="v4m-agent-bankroll-num">$10,000</div>
</div>
</div>
<!-- Strategy recap — compact strip; the portfolio gets the full card width -->
<div class="v4m-strat-strip">
<div class="v4m-strat-cell"><span class="v4m-strat-strip-label">Rebalance frequency</span><span class="v4m-strat-val" data-strat-slider="0">Every 2h</span></div>
<div class="v4m-strat-cell"><span class="v4m-strat-strip-label">Risk preference</span><span class="v4m-strat-val" data-strat-slider="1">Aggressive</span></div>
<div class="v4m-strat-cell"><span class="v4m-strat-strip-label">Max position size</span><span class="v4m-strat-val" data-strat-slider="2">Medium</span></div>
</div>
<div class="v4m-portfolio-block">
<span class="v4m-section-eyebrow">Your portfolio · 28 holdings</span>
<div class="v4m-alloc-stack" style="margin-top: 10px;">
<span style="width: 8.4%; background: #E11D2E;"></span>
<span style="width: 7.8%; background: #18181B;"></span>
<span style="width: 7.2%; background: #00C2CB;"></span>
<span style="width: 6.7%; background: #C2A633;"></span>
<span style="width: 6.3%; background: #4FD1B5;"></span>
<span style="width: 5.8%; background: #7C3AED;"></span>
<span style="width: 5.4%; background: #FF8200;"></span>
<span style="width: 5.0%; background: #2AA8E0;"></span>
<span style="width: 4.7%; background: #008CD7;"></span>
<span style="width: 4.4%; background: #1E6FD9;"></span>
<span style="width: 4.0%; background: #00A7B5;"></span>
<span style="width: 3.8%; background: #005288;"></span>
<span style="width: 3.5%; background: #EC796B;"></span>
<span style="width: 3.3%; background: #2775CA;"></span>
<span style="width: 3.0%; background: #26A17B;"></span>
<span style="width: 2.8%; background: #F3BA2F;"></span>
<span style="width: 2.6%; background: #F7931A;"></span>
<span style="width: 2.4%; background: #18181B;"></span>
<span style="width: 2.3%; background: #627EEA;"></span>
<span style="width: 2.1%; background: #0090FF;"></span>
<span style="width: 2.0%; background: #101820;"></span>
<span style="width: 1.8%; background: #002F87;"></span>
<span style="width: 1.7%; background: #9945FF;"></span>
<span style="width: 1.6%; background: #23292F;"></span>
<span style="width: 1.4%; background: #F4B728;"></span>
</div>
<div class="v4m-alloc-groups" id="kiosk-alloc-groups"></div>
</div>
<!-- Footer: QR code + scan caption -->
<div class="v4m-agent-qr-row">
<canvas id="qr-glyph" class="v4m-agent-qr" width="160" height="160"></canvas>
<div class="v4m-agent-qr-text">
<div class="v4m-agent-qr-cap">Scan to open your profile.</div>
<div class="v4m-agent-qr-sub">Live P&L · Retune anytime</div>
</div>
</div>
</aside>
</div>
</div>
</div></div>
</div>
</div>
<div style="margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
<button class="btn-trigger coral" id="kiosk-replay" aria-label="Replay the routing animation"><span aria-hidden="true">▶</span> Replay routing animation</button>
<button class="btn-trigger" id="kiosk-classical-toggle">Force classical winner</button>
<span class="small" style="color: var(--zinc-500);">Use the toggle to preview the classical-winner state.</span>
</div>
<h3 style="margin-top: 50px; margin-bottom: 14px;">Phone · Personal profile <span class="interactive-tag" style="margin-left: 8px;">Live · drag & retune</span></h3>
<p class="small" style="margin-bottom: 12px;">Linked from the QR code; accessible anywhere at the venue. The routing card sits directly below P&L. Each retune dispatches a new job through Quip Network and animates the result. Drag any slider, then tap "Re-optimize" to submit a new optimization. Tap <strong>"Your basket · Edit"</strong> (between the routing card and the sliders) to open the <strong>asset selector</strong> on a second screen — re-pick the basket (min 3) and "Save". Re-optimizing the new basket is a separate tap on the main profile.</p>
<div class="mockup-frame phone dark">
<div class="screen">
<div class="qs-v4-mock phone-v4">
<!-- Phone status bar (9:41 + signal/5G/battery) -->
<div class="v4m-status">
<span>9:41</span>
<div class="v4m-status-icons">
<span class="v4m-bars"><span></span><span></span><span></span><span></span></span>
<span style="font-family:'JetBrains Mono',ui-monospace,monospace;font-size:0.6rem;letter-spacing:0.04em;">5G</span>
<span class="v4m-battery"></span>
</div>
</div>
<!-- ── Profile view (default) ── -->
<div id="phone-profile-view">
<!-- Header: player name + handle + rank pill, glyph on the right -->
<div class="v4m-phone-head">
<div>
<div class="v4m-phone-name" id="phone-name">Lattice Theory</div>
</div>
<canvas id="phone-glyph" width="56" height="56"></canvas>
<div class="v4m-phone-rank" style="grid-column: 1 / 3; margin-top: 4px; justify-self: start;">
<span>You’re</span>
<span class="v4m-rank-num">#6</span>
<span>of 247</span>
</div>
</div>
<!-- P&L hero -->
<div class="v4m-pl">
<div>
<div class="v4m-section-eyebrow">Total · Live</div>
<div class="v4m-pl-num" id="phone-pl-num">$10,142</div>
<div class="v4m-pl-change up" id="phone-pl-change">+$142 · +1.42%</div>
</div>
<svg class="v4m-spark" viewBox="0 0 80 36" preserveAspectRatio="none" aria-hidden="true">
<polyline points="0,32 8,30 14,28 20,26 28,24 36,18 42,21 48,16 54,14 60,11 68,12 76,7"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Routing card (phone-mega equivalent) -->
<div class="v4m-phone-mega" id="phone-routing">
<div style="display:flex;justify-content:space-between;align-items:baseline;">
<span class="v4m-section-eyebrow cyan-dot cyan" id="phone-route-pill">Solved via Quip · <span id="phone-route-ago">4m ago</span></span>
</div>
<div style="display:flex; justify-content:space-between; align-items:baseline; gap: 10px;">
<div>
<span id="phone-route-tag" style="display:none;">★ QUANTUM</span>
<div class="v4m-phone-mega-hero" id="phone-route-name">D-Wave Advantage</div>
<div class="v4m-phone-mega-meta" id="phone-route-vs">Quantum · 14× vs classical</div>
</div>
<div style="text-align:right;">
<div id="phone-route-time" style="font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.6rem; letter-spacing: -0.025em; color: #0891B2; line-height: 1;">0.42s</div>
</div>
</div>
<div class="v4m-race-block" style="border-top: 1px solid #ececef; padding-top: 8px;">
<div class="v4m-race-row" style="grid-template-columns: 70px 1fr 50px;">
<span class="v4m-race-label q">D-Wave</span>
<div class="v4m-race-bar"><div class="v4m-race-fill q" id="phone-bar-q" style="width: 7%"></div></div>
<span class="v4m-race-time" id="phone-time-q">0.42s</span>
</div>
<div class="v4m-race-row" style="grid-template-columns: 70px 1fr 50px;">
<span class="v4m-race-label">Classical</span>
<div class="v4m-race-bar"><div class="v4m-race-fill" id="phone-bar-c" style="width: 100%"></div></div>
<span class="v4m-race-time" id="phone-time-c">5.88s</span>
</div>
</div>
</div>
<!-- Browse to the basket editor (2nd screen) -->
<button type="button" class="v4m-basket-open" id="phone-basket-open">
<span class="v4m-section-eyebrow">Your basket · <span id="phone-basket-open-count">25</span> assets</span>
<span class="v4m-basket-open-cta">Edit →</span>
</button>
<!-- Strategy sliders -->
<div>
<div class="v4m-section-eyebrow" style="margin-bottom: 8px;">Strategy · Drag to Retune</div>
<div class="v4m-slider">
<div class="v4m-slider-top"><span class="v4m-slider-label">Rebalance frequency</span><span class="v4m-slider-val" data-phone-label="0">Every 2h</span></div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-phone-fill="0" style="width: 70%"></div>
<div class="v4m-slider-knob" style="left: 70%"></div>
</div>
<input type="range" class="range-overlay" data-phone="0" min="0" max="100" value="70" />
</div>
</div>
<div class="v4m-slider">
<div class="v4m-slider-top"><span class="v4m-slider-label">Risk preference</span><span class="v4m-slider-val" data-phone-label="1">Aggressive</span></div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-phone-fill="1" style="width: 78%"></div>
<div class="v4m-slider-knob" style="left: 78%"></div>
</div>
<input type="range" class="range-overlay" data-phone="1" min="0" max="100" value="78" />
</div>
</div>
<div class="v4m-slider">
<div class="v4m-slider-top"><span class="v4m-slider-label">Max position size</span><span class="v4m-slider-val" data-phone-label="2">Medium</span></div>
<div class="v4m-slider-shell">
<div class="v4m-slider-track">
<div class="v4m-slider-fill" data-phone-fill="2" style="width: 50%"></div>
<div class="v4m-slider-knob" style="left: 50%"></div>
</div>
<input type="range" class="range-overlay" data-phone="2" min="0" max="100" value="50" />
</div>
</div>
</div>
<!-- CTA -->
<button class="v4m-cta" id="phone-retune">
<span>Re-optimize on Quip Network</span>
<span class="v4m-cta-arrow">→</span>
</button>
</div><!-- /phone-profile-view -->
<!-- ── Basket editor view (2nd screen, hidden until "Edit" is tapped) ── -->
<div id="phone-basket-view" style="display: none;">
<div class="v4m-basket-head">
<button type="button" class="v4m-basket-back" id="phone-basket-back" aria-label="Back to profile">←</button>
<span class="v4m-section-eyebrow">Edit basket</span>
<span class="v4m-basket-count" id="phone-basket-count">28/28 · min 3</span>
</div>
<div class="v4m-basket-scroll" id="phone-basket-scroll"></div>
<button class="v4m-cta" id="phone-basket-save">
<span>Save basket</span>
<span class="v4m-cta-arrow">→</span>
</button>
</div>
</div>
</div>
</div>
<div style="margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
<span class="small" style="color: var(--zinc-500);">★ Drag any slider, then tap <strong>Re-optimize</strong>. The routing card animates the routing job; the provider that returns a valid optimum first wins.</span>
</div>
</section>
<!-- ================================================ ASSET ICONS -->
<section id="assets">
<div class="kicker">05 · Asset icons</div>
<h2>The 28-asset universe</h2>
<p class="lede">Icon audit for every tradable asset — 14 crypto + 14 stocks. Crypto marks come from the open-source <a href="https://github.com/spothq/cryptocurrency-icons">spothq/cryptocurrency-icons</a> set, with HYPE, STRK, RENDER and SOL pulled from <a href="https://www.coingecko.com">CoinGecko's</a> asset images; stock marks come from each company's own favicon via Google's favicon service (IONQ, RGTI, QUBT, HON, LAES, ARQQ, GOOGL, NVDA, MSFT, AMZN), from official X/Twitter brand avatars where favicons were too small (QBTS / D-Wave, SAF / Safran, SPCX / SpaceX), and from the official 8-bar wordmark for IBM. All marks are property of their respective owners — event display use. Review and flag any to swap before they ship in the portfolio views. <a href="shared-design/asset-icons/qtw-asset-icons.zip" download><strong>Download all 28 as 256×256 PNGs (zip)</strong></a>.</p>
<h3 style="margin: 24px 0 10px;">Crypto · 14</h3>
<div class="icon-audit">
<div class="icon-card"><img src="shared-design/asset-icons/btc.svg" alt="BTC icon"><div class="icon-card-ticker">BTC</div><div class="icon-card-name">Bitcoin</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/eth.svg" alt="ETH icon"><div class="icon-card-ticker">ETH</div><div class="icon-card-name">Ethereum</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/bnb.svg" alt="BNB icon"><div class="icon-card-ticker">BNB</div><div class="icon-card-name">BNB</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/usdc.svg" alt="USDC icon"><div class="icon-card-ticker">USDC</div><div class="icon-card-name">USD Coin</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/xrp.svg" alt="XRP icon"><div class="icon-card-ticker">XRP</div><div class="icon-card-name">XRP</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/sol.png" alt="SOL icon"><div class="icon-card-ticker">SOL</div><div class="icon-card-name">Solana</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/hype.png" alt="HYPE icon"><div class="icon-card-ticker">HYPE</div><div class="icon-card-name">Hyperliquid</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/doge.svg" alt="DOGE icon"><div class="icon-card-ticker">DOGE</div><div class="icon-card-name">Dogecoin</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/usdt.svg" alt="USDT icon"><div class="icon-card-ticker">USDT</div><div class="icon-card-name">Tether</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/zec.svg" alt="ZEC icon"><div class="icon-card-ticker">ZEC</div><div class="icon-card-name">Zcash</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/algo.svg" alt="ALGO icon"><div class="icon-card-ticker">ALGO</div><div class="icon-card-name">Algorand</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/strk.png" alt="STRK icon"><div class="icon-card-ticker">STRK</div><div class="icon-card-name">Starknet</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/fil.svg" alt="FIL icon"><div class="icon-card-ticker">FIL</div><div class="icon-card-name">Filecoin</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/render.png" alt="RENDER icon"><div class="icon-card-ticker">RENDER</div><div class="icon-card-name">Render</div></div>
</div>
<h3 style="margin: 28px 0 10px;">Stocks · 14</h3>
<div class="icon-audit">
<div class="icon-card"><img src="shared-design/asset-icons/ionq.png" alt="IONQ icon"><div class="icon-card-ticker">IONQ</div><div class="icon-card-name">IonQ</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/qbts.png" alt="QBTS icon"><div class="icon-card-ticker">QBTS</div><div class="icon-card-name">D-Wave Quantum</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/rgti.png" alt="RGTI icon"><div class="icon-card-ticker">RGTI</div><div class="icon-card-name">Rigetti Computing</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/qubt.png" alt="QUBT icon"><div class="icon-card-ticker">QUBT</div><div class="icon-card-name">Quantum Computing</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/ibm.png" alt="IBM icon"><div class="icon-card-ticker">IBM</div><div class="icon-card-name">IBM</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/saf.png" alt="SAF icon"><div class="icon-card-ticker">SAF</div><div class="icon-card-name">Safran</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/spcx.png" alt="SPCX icon"><div class="icon-card-ticker">SPCX</div><div class="icon-card-name">SpaceX</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/hon.png" alt="HON icon"><div class="icon-card-ticker">HON</div><div class="icon-card-name">Honeywell</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/laes.png" alt="LAES icon"><div class="icon-card-ticker">LAES</div><div class="icon-card-name">SEALSQ</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/arqq.png" alt="ARQQ icon"><div class="icon-card-ticker">ARQQ</div><div class="icon-card-name">Arqit Quantum</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/googl.png" alt="GOOGL icon"><div class="icon-card-ticker">GOOGL</div><div class="icon-card-name">Alphabet</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/nvda.png" alt="NVDA icon"><div class="icon-card-ticker">NVDA</div><div class="icon-card-name">NVIDIA</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/msft.png" alt="MSFT icon"><div class="icon-card-ticker">MSFT</div><div class="icon-card-name">Microsoft</div></div>
<div class="icon-card"><img src="shared-design/asset-icons/amzn.png" alt="AMZN icon"><div class="icon-card-ticker">AMZN</div><div class="icon-card-name">Amazon</div></div>
</div>
<p class="small" style="margin-top: 16px; color: var(--zinc-500);">The zip normalizes every mark to a transparent 256×256 PNG named by ticker (BTC.png … AMZN.png); the in-app icons under <code>shared-design/asset-icons/</code> keep their original formats.</p>
</section>
<!-- ================================================ BIGSCREEN -->
<section id="bigscreen">
<div class="kicker">06 · Big-screen behavior</div>
<h2>Booth TV rotation</h2>
<p class="lede">The booth TV has four states. <strong>State A</strong> (top-10 leaderboard) is the default view and reappears between every other state. <strong>State B</strong> spotlights and <strong>state C</strong> intros rotate on a timer. <strong>State D</strong> (new-agent welcome) interrupts the rotation whenever a kiosk submits a new agent.</p>
<p class="small" style="margin-top: -8px; margin-bottom: 18px; color: var(--coral);">Strategy adjustments do <strong>not</strong> trigger a big-screen change. The screen reacts only to new signups, not to ongoing retunes.</p>
<div style="margin-bottom: 32px; padding: 18px 22px; background: var(--zinc-50); border: 1px solid var(--zinc-200); border-radius: var(--r-md);">
<div class="kicker" style="margin: 0 0 10px 0;">Rotation loop</div>
<p class="small" style="margin: 0 0 8px;"><strong>State A</strong> (leaderboard) is the anchor; the screen returns to it between every other state.</p>
<p class="small" style="margin: 0 0 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; line-height: 1.7; color: var(--zinc-700);">
A (leaderboard) → B (spotlight rank #1) → C (intro) →<br>
A (leaderboard) → B (spotlight rank #2) → C (intro) →<br>
A (leaderboard) → B (spotlight rank #3) → C (intro) →<br>
… cycles through all 10 ranks, then loops back to rank #1.
</p>
<p class="small" style="margin: 0;"><strong>State D</strong> (new-agent welcome) interrupts the loop for ~10s on each new kiosk submission, then the rotation resumes from where it paused.</p>
</div>
<h3 style="margin-bottom: 12px;">Live preview · booth TV rotation <span class="interactive-tag" style="margin-left: 8px;">Auto-rotating</span></h3>
<p class="small" style="margin-bottom: 12px;">Looping preview of the production rotation: <strong>12s leaderboard → 15s spotlight → 20s intro → repeat</strong>. The spotlight steps to the next rank on each cycle. Click <strong>Sign up a new player</strong> to inject the 10s welcome splash; the rotation resumes from where it paused. Over a few minutes the preview cycles through every top-10 agent with the leaderboard between each.</p>
<div class="mockup-frame booth-frame">
<div class="chrome">Booth TV · 1920×1080 · LIVE</div>
<div class="screen">
<div class="bigscreen dir-quipsite v4" id="booth-tv">
<div class="qs-nav">
<div class="qs-mark">
<svg class="quip-wm"><use href="#quip-wm"/></svg>
<div class="nav-divider"></div>
<span class="nav-eyebrow">Quantum.Tech World 2026 · Trading Competition</span>
</div>
<div class="h-eyebrow"><span class="lbl">Live · Top Ten</span><span class="bar"></span></div>
</div>
<div class="qs-body-v4">
<div class="qs-hero-left">
<div class="left">
<h1>Top ten <span class="it">quantum trading agents.</span></h1>
</div>
<div class="right">
<div class="lbl" style="font-family:'JetBrains Mono',monospace;font-size:1.3cqh;letter-spacing:0.18em;text-transform:uppercase;color:#71717b;">Refreshing in</div>
<div class="countdown" style="font-family:Georgia,serif;font-style:italic;font-size:3.4cqh;color:#18181b;font-variant-numeric:tabular-nums;">02.5s</div>
</div>
</div>
<div class="qs-table-area">
<div class="qs-table">
<div class="th"><span class="rk">Rank</span><span class="nm">Agent</span><span class="pnl">Total P&L</span><span class="change">▲%</span></div>
<div class="qs-row top1"><span class="rank">01<span class="medal">🥇</span></span><span class="name">Hilbert Spaceship</span><span class="pnl">$11,402</span><span class="change">+14.02%</span></div>
<div class="qs-row top2"><span class="rank">02<span class="medal">🥈</span></span><span class="name">Bra-Ket Boy</span><span class="pnl">$10,981</span><span class="change">+9.81%</span></div>
<div class="qs-row top3"><span class="rank">03<span class="medal">🥉</span></span><span class="name">Eigenvalue Eve</span><span class="pnl">$10,778</span><span class="change">+7.78%</span></div>
<div class="qs-row"><span class="rank">04</span><span class="name">Annealing Ant</span><span class="pnl">$10,612</span><span class="change">+6.12%</span></div>
<div class="qs-row"><span class="rank">05</span><span class="name">QUBO McQuboface</span><span class="pnl">$10,403</span><span class="change">+4.03%</span></div>
<div class="qs-row"><span class="rank">06</span><span class="name">Lattice Theory</span><span class="pnl">$10,142</span><span class="change">+1.42%</span></div>
<div class="qs-row"><span class="rank">07</span><span class="name">Schrödinger’s Bag</span><span class="pnl">$10,089</span><span class="change">+0.89%</span></div>
<div class="qs-row"><span class="rank">08</span><span class="name">Probably Approximately</span><span class="pnl">$10,041</span><span class="change">+0.41%</span></div>
<div class="qs-row"><span class="rank">09</span><span class="name">Coherent Cat</span><span class="pnl">$10,029</span><span class="change">+0.29%</span></div>
<div class="qs-row"><span class="rank">10</span><span class="name">Tunneling Tina</span><span class="pnl">$9,994</span><span class="change down">−0.06%</span></div>
</div>
</div>
<aside class="qs-rail v4-rail">
<div class="v4-mega">
<div class="v4-section">
<div class="v3-panel-head">
<span class="v3-panel-eyebrow">Routing today</span>
<span class="v3-panel-hero">Quantum <span class="accent">vs</span> classical.</span>
</div>
<div class="v3-panel-body">
<div class="v3-qc">
<div class="num-row">
<span class="num-q">88<span class="pct">%</span></span>
<span class="num-c">12<span class="pct">%</span></span>
</div>
<div class="names">
<span class="n-q">Quantum (QPU)</span>
<span class="n-c">Classical (CPU)</span>
</div>
<div class="ms-bar"><span class="q"></span><span class="c"></span></div>
</div>
</div>
</div>
<div class="v4-section">
<div class="v3-panel-head">
<span class="v3-panel-eyebrow">Top providers</span>
<span class="v3-panel-hero">Top Providers</span>
</div>
<div class="v3-panel-body">
<div class="v4-plist">
<div class="v4-stack">
<span class="seg q" style="width: 88%"></span>
<span class="seg c1" style="width: 3%"></span>
<span class="seg c2" style="width: 2%"></span>
<span class="seg c3" style="width: 2%"></span>
<span class="seg c4" style="width: 1%"></span>
<span class="seg c5" style="width: 1%"></span>
<span class="seg c6" style="width: 1%"></span>
<span class="seg c7" style="width: 1%"></span>
<span class="seg c8" style="width: 1%"></span>
</div>
<div class="v4-pr q"><span class="type">QPU</span><span class="nm">D-Wave Advantage</span><span class="pct">88%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Helios-12</span><span class="pct">3%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Falcon-7</span><span class="pct">2%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Cumulus-3</span><span class="pct">2%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Atlas-9</span><span class="pct">1%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Nimbus-5</span><span class="pct">1%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Stratos-2</span><span class="pct">1%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Cirrus-8</span><span class="pct">1%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Boreas-4</span><span class="pct">1%</span></div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
<!-- v4 import: rotation/state-cycle controls hidden because the booth-TV mock
is now a single consolidated v4 leaderboard view (no spotlight/welcome states). -->
<div style="margin-top: 14px; display: none;">
<button class="btn-trigger coral" id="booth-signup" aria-label="Trigger new-player signup splash"><span aria-hidden="true">▶</span> Sign up a new player</button>
<button class="btn-trigger" id="booth-pause" aria-label="Pause big-screen rotation"><span aria-hidden="true">⏸</span> Pause rotation</button>
<button class="btn-trigger" id="booth-skip" aria-label="Skip ahead to spotlight state"><span aria-hidden="true">⏭</span> Skip to spotlight</button>
<span class="small" style="color: var(--zinc-500);">12s leaderboard → 15s spotlight (cycling) → loop. Sign-up interrupts for 10s.</span>
</div>
<hr style="border: 0; border-top: 1px solid var(--zinc-200); margin: 60px 0 36px;">
<h3 style="margin-bottom: 36px;">Reference · each state in isolation</h3>
<h3 style="margin-bottom: 12px;">State A · Top-10 leaderboard <span class="pill" style="margin-left: 8px;">default state</span></h3>
<div class="mockup-frame booth-frame">
<div class="chrome">Booth TV · 1920×1080</div>
<div class="screen">
<div class="bigscreen dir-quipsite v4">
<div class="qs-nav">
<div class="qs-mark">
<svg class="quip-wm"><use href="#quip-wm"/></svg>
<div class="nav-divider"></div>
<span class="nav-eyebrow">Quantum.Tech World 2026 · Trading Competition</span>
</div>
<div class="h-eyebrow"><span class="lbl">Live · Top Ten</span><span class="bar"></span></div>
</div>
<div class="qs-body-v4">
<div class="qs-hero-left">
<div class="left">
<h1>Top ten <span class="it">quantum trading agents.</span></h1>
</div>
<div class="right">
<div class="lbl" style="font-family:'JetBrains Mono',monospace;font-size:1.3cqh;letter-spacing:0.18em;text-transform:uppercase;color:#71717b;">Refreshing in</div>
<div class="countdown" style="font-family:Georgia,serif;font-style:italic;font-size:3.4cqh;color:#18181b;font-variant-numeric:tabular-nums;">02.5s</div>
</div>
</div>
<div class="qs-table-area">
<div class="qs-table">
<div class="th"><span class="rk">Rank</span><span class="nm">Agent</span><span class="pnl">Total P&L</span><span class="change">▲%</span></div>
<div class="qs-row top1"><span class="rank">01<span class="medal">🥇</span></span><span class="name">Hilbert Spaceship</span><span class="pnl">$11,402</span><span class="change">+14.02%</span></div>
<div class="qs-row top2"><span class="rank">02<span class="medal">🥈</span></span><span class="name">Bra-Ket Boy</span><span class="pnl">$10,981</span><span class="change">+9.81%</span></div>
<div class="qs-row top3"><span class="rank">03<span class="medal">🥉</span></span><span class="name">Eigenvalue Eve</span><span class="pnl">$10,778</span><span class="change">+7.78%</span></div>
<div class="qs-row"><span class="rank">04</span><span class="name">Annealing Ant</span><span class="pnl">$10,612</span><span class="change">+6.12%</span></div>
<div class="qs-row"><span class="rank">05</span><span class="name">QUBO McQuboface</span><span class="pnl">$10,403</span><span class="change">+4.03%</span></div>
<div class="qs-row"><span class="rank">06</span><span class="name">Lattice Theory</span><span class="pnl">$10,142</span><span class="change">+1.42%</span></div>
<div class="qs-row"><span class="rank">07</span><span class="name">Schrödinger’s Bag</span><span class="pnl">$10,089</span><span class="change">+0.89%</span></div>
<div class="qs-row"><span class="rank">08</span><span class="name">Probably Approximately</span><span class="pnl">$10,041</span><span class="change">+0.41%</span></div>
<div class="qs-row"><span class="rank">09</span><span class="name">Coherent Cat</span><span class="pnl">$10,029</span><span class="change">+0.29%</span></div>
<div class="qs-row"><span class="rank">10</span><span class="name">Tunneling Tina</span><span class="pnl">$9,994</span><span class="change down">−0.06%</span></div>
</div>
</div>
<aside class="qs-rail v4-rail">
<div class="v4-mega">
<div class="v4-section">
<div class="v3-panel-head">
<span class="v3-panel-eyebrow">Routing today</span>
<span class="v3-panel-hero">Quantum <span class="accent">vs</span> classical.</span>
</div>
<div class="v3-panel-body">
<div class="v3-qc">
<div class="num-row">
<span class="num-q">88<span class="pct">%</span></span>
<span class="num-c">12<span class="pct">%</span></span>
</div>
<div class="names">
<span class="n-q">Quantum (QPU)</span>
<span class="n-c">Classical (CPU)</span>
</div>
<div class="ms-bar"><span class="q"></span><span class="c"></span></div>
</div>
</div>
</div>
<div class="v4-section">
<div class="v3-panel-head">
<span class="v3-panel-eyebrow">Top providers</span>
<span class="v3-panel-hero">Top Providers</span>
</div>
<div class="v3-panel-body">
<div class="v4-plist">
<div class="v4-stack">
<span class="seg q" style="width: 88%"></span>
<span class="seg c1" style="width: 3%"></span>
<span class="seg c2" style="width: 2%"></span>
<span class="seg c3" style="width: 2%"></span>
<span class="seg c4" style="width: 1%"></span>
<span class="seg c5" style="width: 1%"></span>
<span class="seg c6" style="width: 1%"></span>
<span class="seg c7" style="width: 1%"></span>
<span class="seg c8" style="width: 1%"></span>
</div>
<div class="v4-pr q"><span class="type">QPU</span><span class="nm">D-Wave Advantage</span><span class="pct">88%</span></div>
<div class="v4-pr c"><span class="type">CPU</span><span class="nm">Helios-12</span><span class="pct">3%</span></div>