-
-
Notifications
You must be signed in to change notification settings - Fork 24
Expand file tree
/
Copy pathcommunication.html
More file actions
1721 lines (1615 loc) · 103 KB
/
Copy pathcommunication.html
File metadata and controls
1721 lines (1615 loc) · 103 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.0">
<title>Social Confidence for Engineers & Introverts — DevDunia</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Space+Mono:wght@400;700&display=swap">
<style>
:root {
--ink: #1a1410; --paper: #fdf3e3; --paper2: #fbe9cc;
--red: #e63946; --blue: #1d6fb8; --yellow: #ffd23f;
--green: #3fa34d; --pink: #ff6b9d; --purple: #8a4fff;
--orange: #ff8c42; --teal: #0d9488;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Comic Neue', cursive;
color: var(--ink);
background-color: var(--paper);
background-image: radial-gradient(var(--ink) 0.5px, transparent 0.6px);
background-size: 14px 14px;
background-attachment: fixed;
line-height: 1.65;
}
.page-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 20px 32px 60px; }
.panel {
border: 4px solid var(--ink); border-radius: 6px;
box-shadow: 7px 7px 0 var(--ink);
background: var(--paper); padding: 28px 32px; margin-bottom: 32px;
}
h2 { font-family: 'Bangers', cursive; font-size: 2.4rem; letter-spacing: 2px; margin-bottom: 16px; line-height: 1; }
h3 { font-family: 'Bangers', cursive; font-size: 1.6rem; letter-spacing: 1px; margin-bottom: 12px; }
h4 { font-family: 'Bangers', cursive; font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 8px; }
p { margin-bottom: 14px; font-size: 1.05rem; }
p:last-child { margin-bottom: 0; }
ul { padding-left: 22px; margin-bottom: 14px; }
li { margin-bottom: 6px; font-size: 1rem; }
code { font-family: 'Space Mono', monospace; font-size: .85em; background: var(--paper2); padding: 1px 5px; border-radius: 3px; }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.section-num {
font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 2px;
background: var(--purple); color: #fff; padding: 4px 14px;
border-radius: 4px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.chip {
display: inline-block; font-family: 'Bangers', cursive; font-size: .85rem;
letter-spacing: 1.5px; padding: 3px 12px; border-radius: 4px;
border: 2px solid var(--ink); margin-right: 6px; margin-bottom: 6px; vertical-align: middle;
}
.chip-green { background: var(--green); color: #fff; }
.chip-red { background: var(--red); color: #fff; }
.chip-blue { background: var(--blue); color: #fff; }
.chip-yellow { background: var(--yellow); color: var(--ink); }
.chip-orange { background: var(--orange); color: #fff; }
.chip-purple { background: var(--purple); color: #fff; }
.chip-pink { background: var(--pink); color: #fff; }
.hbox {
border: 3px solid var(--ink); border-radius: 5px; padding: 18px 22px;
margin: 16px 0; position: relative;
}
.hbox-label {
font-family: 'Bangers', cursive; font-size: .9rem; letter-spacing: 2px;
position: absolute; top: -14px; left: 16px; padding: 2px 12px;
border: 2px solid var(--ink); border-radius: 4px;
}
.hbox-orange { background: rgba(255,140,66,.1); border-color: var(--orange); }
.hbox-orange .hbox-label { background: var(--orange); color: #fff; }
.hbox-red { background: rgba(230,57,70,.08); border-color: var(--red); }
.hbox-red .hbox-label { background: var(--red); color: #fff; }
.hbox-green { background: rgba(63,163,77,.1); border-color: var(--green); }
.hbox-green .hbox-label { background: var(--green); color: #fff; }
.hbox-blue { background: rgba(29,111,184,.1); border-color: var(--blue); }
.hbox-blue .hbox-label { background: var(--blue); color: #fff; }
.hbox-yellow { background: rgba(255,210,63,.15); border-color: var(--yellow); }
.hbox-yellow .hbox-label { background: var(--yellow); color: var(--ink); }
.hbox-purple { background: rgba(138,79,255,.08); border-color: var(--purple); }
.hbox-purple .hbox-label { background: var(--purple); color: #fff; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card {
border: 3px solid var(--ink); border-radius: 5px;
box-shadow: 4px 4px 0 var(--ink); padding: 18px; background: var(--paper);
}
.card-head { font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.step-flow { display: flex; flex-direction: column; gap: 0; }
.step-item { display: grid; grid-template-columns: 52px 1fr; gap: 0 18px; position: relative; }
.step-item:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 52px; bottom: -16px; width: 2px; background: var(--ink); }
.step-num {
width: 52px; height: 52px; border-radius: 50%;
border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center;
font-family: 'Bangers', cursive; font-size: 1.3rem;
box-shadow: 3px 3px 0 var(--ink); flex-shrink: 0; position: relative; z-index: 1;
}
.step-body { padding: 8px 0 28px; }
.sfx-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.sfx {
font-family: 'Bangers', cursive; font-size: 1.8rem; letter-spacing: 3px;
color: var(--ink); text-shadow: 3px 3px 0 var(--yellow); transform: rotate(-2deg); display: inline-block;
}
/* ── SPEECH BUBBLE ───────── */
.bubble-wrap { display: flex; gap: 14px; margin: 12px 0; align-items: flex-start; }
.bubble-wrap.right { flex-direction: row-reverse; }
.bubble-avatar {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0; box-shadow: 2px 2px 0 var(--ink);
}
.bubble {
position: relative; padding: 12px 16px; border-radius: 12px;
border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
max-width: 78%; font-size: .98rem; line-height: 1.55;
}
.bubble::before {
content: ''; position: absolute; top: 14px;
width: 0; height: 0;
}
.bubble-wrap:not(.right) .bubble::before {
left: -12px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 12px solid var(--ink);
}
.bubble-wrap.right .bubble::before {
right: -12px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid var(--ink);
}
.bubble.you { background: #e8f4fd; }
.bubble.them { background: var(--paper2); }
.bubble.bad { background: #fdecea; border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.bubble.good { background: #edfaea; border-color: var(--green); box-shadow: 3px 3px 0 var(--green); }
.bubble-label { font-family: 'Space Mono', monospace; font-size: .68rem; color: #888; margin-bottom: 4px; display: block; }
/* ── PRINCIPLE CARDS ───── */
.principle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.principle-card {
border: 3px solid var(--ink); border-radius: 6px; padding: 16px;
box-shadow: 4px 4px 0 var(--ink); cursor: default;
transition: transform .15s, box-shadow .15s; background: var(--paper);
}
.principle-card:hover { transform: translateY(-3px) translateX(-2px); box-shadow: 6px 7px 0 var(--ink); }
.principle-num {
font-family: 'Bangers', cursive; font-size: 2rem; display: block;
line-height: 1; margin-bottom: 6px;
}
.principle-text { font-size: .95rem; line-height: 1.5; font-style: italic; color: #333; }
/* ── MODE TOGGLE ─────── */
.mode-toggle-wrap { display: flex; gap: 0; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.mode-btn {
flex: 1; padding: 12px 20px; font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 2px;
border: none; cursor: pointer; transition: background .2s, color .2s;
}
.mode-btn.interview { background: #fdecea; color: var(--red); border-right: 3px solid var(--ink); }
.mode-btn.friend { background: #edfaea; color: var(--green); }
.mode-btn.active.interview { background: var(--red); color: #fff; }
.mode-btn.active.friend { background: var(--green); color: #fff; }
/* ── VENUE SELECTOR ──── */
.venue-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.venue-btn {
font-family: 'Bangers', cursive; font-size: .95rem; letter-spacing: 1.5px;
padding: 8px 18px; border: 2.5px solid var(--ink); border-radius: 5px;
background: var(--paper2); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
transition: transform .12s, box-shadow .12s;
}
.venue-btn:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 var(--ink); }
.venue-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
/* ── OPENER CARDS ──────── */
.opener-card {
border: 3px solid var(--ink); border-radius: 6px; padding: 20px 24px;
margin: 12px 0; box-shadow: 4px 4px 0 var(--ink); background: var(--paper);
opacity: 0; transform: translateY(10px);
transition: opacity .3s, transform .3s;
}
.opener-card.visible { opacity: 1; transform: translateY(0); }
.opener-quote {
font-family: 'Comic Neue', cursive; font-size: 1.15rem; font-weight: 700;
font-style: italic; color: #222; margin-bottom: 12px; line-height: 1.5;
border-left: 4px solid var(--purple); padding-left: 14px;
}
.opener-why {
font-size: .9rem; color: #555; background: rgba(138,79,255,.08);
border-radius: 4px; padding: 8px 12px; border-left: 3px solid var(--purple);
}
.opener-why strong { color: var(--purple); }
/* ── ROLEPLAY COMIC ───── */
.comic-scenario-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.comic-scen-btn {
font-family: 'Bangers', cursive; font-size: .9rem; letter-spacing: 1.5px;
padding: 7px 16px; border: 2.5px solid var(--ink); border-radius: 5px;
background: var(--paper2); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
}
.comic-scen-btn.active { background: var(--ink); color: var(--yellow); }
.comic-stage {
border: 4px solid var(--ink); border-radius: 8px; overflow: hidden;
box-shadow: 7px 7px 0 var(--ink); background: var(--paper);
}
.comic-header {
background: var(--ink); color: var(--yellow);
font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 3px;
padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
}
.comic-body { padding: 24px; min-height: 320px; }
.comic-nav {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px; border-top: 3px solid var(--ink); background: var(--paper2);
}
.comic-nav-btn {
font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 2px;
padding: 8px 22px; border: 2.5px solid var(--ink); border-radius: 5px;
background: var(--paper); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
transition: background .12s;
}
.comic-nav-btn:hover { background: var(--paper2); }
.comic-nav-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.comic-progress {
font-family: 'Space Mono', monospace; font-size: .78rem; color: #666;
}
.comic-scene-label {
font-family: 'Bangers', cursive; font-size: .85rem; letter-spacing: 2px;
display: inline-block; padding: 3px 12px; border-radius: 4px; margin-bottom: 16px;
border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.insight-box {
background: #fffbea; border: 2.5px solid var(--yellow); border-radius: 6px;
padding: 14px 18px; margin-top: 16px;
font-size: .93rem; line-height: 1.6;
}
.insight-box strong { font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 1px; color: #9a6000; }
/* ── CHALLENGE CARDS ──── */
.challenge-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.challenge-card {
border: 3px solid var(--ink); border-radius: 6px; padding: 18px;
box-shadow: 5px 5px 0 var(--ink); background: var(--paper);
}
.challenge-day {
font-family: 'Bangers', cursive; font-size: .85rem; letter-spacing: 2px;
padding: 3px 10px; border-radius: 4px; border: 2px solid var(--ink);
display: inline-block; margin-bottom: 10px;
}
.challenge-task { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.challenge-why { font-size: .88rem; color: #555; font-style: italic; }
/* ── ANXIETY METER ─────── */
.anxiety-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 600px) { .anxiety-compare { grid-template-columns: 1fr; } }
.anxiety-side { border: 3px solid var(--ink); border-radius: 6px; padding: 18px; box-shadow: 4px 4px 0 var(--ink); }
.anxiety-head { font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 1.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2.5px solid var(--ink); }
.anxiety-thought { font-size: .93rem; margin-bottom: 8px; padding: 8px 12px; border-radius: 4px; border-left: 3px solid; }
/* ── DAILY PRACTICE ─────── */
.micro-opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 20px 0; }
.micro-opp-card {
border: 3px solid var(--ink); border-radius: 6px; padding: 16px 18px;
box-shadow: 4px 4px 0 var(--ink); background: var(--paper);
transition: transform .12s, box-shadow .12s;
}
.micro-opp-card:hover { transform: translateY(-3px); box-shadow: 6px 7px 0 var(--ink); }
.micro-opp-icon { font-size: 1.6rem; margin-bottom: 8px; display: block; }
.micro-opp-title { font-family: 'Bangers', cursive; font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 6px; }
.micro-opp-what { font-size: .9rem; color: #444; margin-bottom: 6px; }
.micro-opp-say { font-size: .88rem; font-style: italic; color: var(--purple); border-left: 3px solid var(--purple); padding-left: 10px; margin-top: 8px; }
/* ── OBSERVATIONS LIBRARY ── */
.obs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.obs-tab {
font-family: 'Bangers', cursive; font-size: .92rem; letter-spacing: 1.5px;
padding: 7px 16px; border: 2.5px solid var(--ink); border-radius: 5px;
background: var(--paper2); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
transition: transform .1s;
}
.obs-tab:hover { transform: translateY(-1px); }
.obs-tab.active { background: var(--ink); color: var(--yellow); }
.obs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .obs-grid { grid-template-columns: 1fr; } }
.obs-card {
border: 2.5px solid var(--ink); border-radius: 6px; padding: 14px 16px;
background: var(--paper); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
transition: transform .12s, box-shadow .12s, background .12s;
position: relative;
}
.obs-card:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); background: var(--paper2); }
.obs-num { font-family: 'Space Mono', monospace; font-size: .7rem; color: #aaa; margin-bottom: 6px; display: block; }
.obs-text { font-size: 1rem; font-style: italic; line-height: 1.5; color: #222; }
.obs-reaction { display: none; margin-top: 10px; font-size: .88rem; color: var(--purple); border-top: 1.5px dashed #ccc; padding-top: 8px; }
.obs-card.expanded .obs-reaction { display: block; }
.obs-secret-box {
background: var(--ink); color: var(--yellow); border-radius: 6px; padding: 20px 24px;
margin-top: 20px; font-family: 'Comic Neue', cursive; font-size: 1rem; line-height: 1.8;
}
.obs-secret-box h4 { font-family: 'Bangers', cursive; font-size: 1.3rem; letter-spacing: 2px; margin-bottom: 10px; color: var(--yellow); }
/* ── ADVANCED MOVES ─────── */
.move-block {
border: 3px solid var(--ink); border-radius: 6px; padding: 20px 24px;
margin: 16px 0; box-shadow: 4px 4px 0 var(--ink); background: var(--paper);
}
.move-block-title { font-family: 'Bangers', cursive; font-size: 1.2rem; letter-spacing: 1.5px; margin-bottom: 14px; }
.swap-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 12px 0; }
@media (max-width: 600px) { .swap-row { grid-template-columns: 1fr; } }
.swap-bad { background: #fdecea; border: 2px solid var(--red); border-radius: 5px; padding: 12px 16px; font-size: .95rem; }
.swap-good { background: #edfaea; border: 2px solid var(--green); border-radius: 5px; padding: 12px 16px; font-size: .95rem; }
.swap-arrow { font-family: 'Bangers', cursive; font-size: 1.4rem; color: var(--ink); text-align: center; }
.reaction-demo { background: var(--paper2); border: 2.5px solid var(--ink); border-radius: 6px; padding: 16px 20px; margin: 12px 0; }
.reaction-label { font-family: 'Bangers', cursive; font-size: .9rem; letter-spacing: 2px; margin-bottom: 8px; }
</style>
</head>
<body>
<div data-masthead></div>
<div class="page-wrap">
<div data-tool-hero
data-title="Social Confidence for Engineers"
data-chapter="SOFT-01"
data-category="Human Skills"
data-icon="🤝"
data-desc="Why smart, analytical people freeze in social situations — and the mindset shift that makes conversation feel natural again."
data-color="purple"
data-badges="COMMUNICATION,MINDSET,SOCIAL SKILLS,INTROVERT GUIDE"
data-badge-colors="purple,blue,green,orange">
</div>
<!-- ── SECTION 01: Root Cause ─────────────────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">01</span>
<h2>Root Cause: You're Running the Wrong Algorithm</h2>
</div>
<p>Engineers, developers, and analytical people aren't bad at socializing. They're applying a <strong>logic framework to a situation that doesn't run on logic.</strong> The result is the mental equivalent of running SQL on a REST API.</p>
<div class="grid-2">
<div class="card">
<div class="card-head" style="color:var(--red);">🧠 The Engineering Brain in a Social Situation</div>
<ul>
<li>"I need to have a reason to talk to this person."</li>
<li>"I should ask about their work/background/interests."</li>
<li>"I need to find common ground before the conversation can proceed."</li>
<li>"I must not say something stupid or awkward."</li>
<li>"I'll wait until I have the perfect thing to say."</li>
</ul>
<p style="margin-top:10px;font-size:.9rem;color:var(--red);">This is called <strong>evaluation mode</strong> — and it creates anxiety in everyone, including you.</p>
</div>
<div class="card">
<div class="card-head" style="color:var(--green);">💬 How Socially Fluent People Actually Think</div>
<ul>
<li>"Something interesting is happening. I'll react to it."</li>
<li>"This person is here. So am I. That's enough of a reason."</li>
<li>"I'll say what I'm noticing right now."</li>
<li>"If it goes nowhere, that's fine. No stakes."</li>
<li>"They're a normal human. Same as me."</li>
</ul>
<p style="margin-top:10px;font-size:.9rem;color:var(--green);">This is <strong>curiosity mode</strong> — it generates zero anxiety because there's nothing to evaluate.</p>
</div>
</div>
<div class="hbox hbox-yellow" style="margin-top:20px;">
<div class="hbox-label">THE CORE INSIGHT</div>
<p style="margin-top:8px;">Anxiety in social situations is almost always caused by <strong>treating conversation as a performance to be evaluated</strong> rather than a shared experience to be had. The moment you shift from "am I doing well?" to "what's interesting here?" — the anxiety disappears.</p>
</div>
<h3 style="margin-top:24px;">The Three Thinking Errors</h3>
<div class="step-flow" style="margin-top:12px;">
<div class="step-item">
<div class="step-num" style="background:#fdecea;">❌</div>
<div class="step-body">
<h4>Error 1: "I need a reason to talk to them"</h4>
<p>You don't need a reason. You're both in the same place at the same time. That's the reason. Friends don't need agendas to talk. They just react to what's around them.</p>
</div>
</div>
<div class="step-item">
<div class="step-num" style="background:#fdecea;">❌</div>
<div class="step-body">
<h4>Error 2: "This person is special / intimidating / out of my league"</h4>
<p>Whether they're a CEO, an attractive stranger, or a celebrity — they still struggle to find parking, get bad Wi-Fi, and feel awkward waiting for an elevator alone. <strong>Nobody is on a pedestal. People put themselves there.</strong></p>
</div>
</div>
<div class="step-item">
<div class="step-num" style="background:#fdecea;">❌</div>
<div class="step-body">
<h4>Error 3: "I need to find the perfect topic"</h4>
<p>Topic hunting is a symptom of interview mode. Natural conversation doesn't start with a topic — it starts with a <em>reaction</em>. Something happens. Someone notices it. They say so. Connection happens.</p>
</div>
</div>
</div>
</div>
<!-- ── SECTION 02: The 10 Principles ──────────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">02</span>
<h2>10 Principles That Change Everything</h2>
</div>
<p>These aren't tips. They're a complete mental reframe for how you see social interaction. Read them slowly. The ones that feel uncomfortable are the ones you need most.</p>
<div class="principle-grid" id="principles-grid"></div>
</div>
<!-- ── SECTION 03: Interview vs Friend Mode ────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">03</span>
<h2>Interview Mode vs Friend Mode</h2>
</div>
<p>The same situation. The same person. Two completely different outcomes — determined entirely by which internal mode you're in. Click to see the difference.</p>
<div class="mode-toggle-wrap">
<button class="mode-btn interview active" onclick="setMode('interview', this)">❌ INTERVIEW MODE</button>
<button class="mode-btn friend" onclick="setMode('friend', this)">✅ FRIEND MODE</button>
</div>
<!-- SCENARIO: Conference Networking -->
<div style="margin-bottom:28px;">
<div style="font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:#888;margin-bottom:14px;">📍 SCENARIO: Tech Conference — Waiting for the Next Talk</div>
<div id="mode-convo-conference"></div>
<div id="mode-insight-conference" class="insight-box">
<strong>WHY THIS FEELS AWKWARD:</strong> Interview mode forces the other person to explain themselves. It's exhausting. After 2 questions they feel like they're at an HR meeting. Friend mode makes them feel seen and creates a shared reaction — neither person is under pressure to perform.
</div>
</div>
<!-- SCENARIO: Coffee Shop -->
<div style="margin-bottom:28px;">
<div style="font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:#888;margin-bottom:14px;">📍 SCENARIO: Coffee Shop — Someone Working Next to You</div>
<div id="mode-convo-coffee"></div>
<div id="mode-insight-coffee" class="insight-box">
<strong>WHY IT WORKS:</strong> The observation ("I always feel guilty...") is relatable and honest. It gives them an easy entry point without pressure. They can agree, disagree, or joke — any response continues the conversation naturally.
</div>
</div>
<!-- SCENARIO: Attractive Stranger -->
<div>
<div style="font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:#888;margin-bottom:14px;">📍 SCENARIO: Meeting Someone Attractive or High-Status</div>
<div id="mode-convo-attractive"></div>
<div id="mode-insight-attractive" class="insight-box">
<strong>THE PEDESTAL PROBLEM:</strong> When you treat someone as special or intimidating, you signal that you believe they are above you. Attractive and successful people can feel this immediately — and it makes them feel like they can't be themselves around you. Equal-status communication is more attractive than any "technique."
</div>
</div>
</div>
<!-- ── SECTION 04: Observation Framework ─────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">04</span>
<h2>The Observation Framework</h2>
</div>
<p>Observations are almost always better than questions as conversation starters. Here's why: a question puts the other person on the spot. An observation gives them something to react to. Reactions create connection. Questions create interrogations.</p>
<div class="grid-3" style="margin: 20px 0;">
<div class="card" style="background:#fdecea;border-color:var(--red);">
<div class="card-head" style="color:var(--red);border-color:var(--red);">🔴 Questions (Puts Them on Spot)</div>
<ul>
<li>"What do you do?"</li>
<li>"Where are you from?"</li>
<li>"Do you come here often?"</li>
<li>"How long have you been coding?"</li>
<li>"What are you working on?"</li>
</ul>
<p style="font-size:.88rem;margin-top:10px;color:#aa2222;">Forces them to answer. Creates an interrogation dynamic. Zero warmth.</p>
</div>
<div class="card" style="background:#edfaea;border-color:var(--green);">
<div class="card-head" style="color:var(--green);border-color:var(--green);">🟢 Observations (Invites Them In)</div>
<ul>
<li>"That queue moved suspiciously fast."</li>
<li>"I always underestimate how loud it gets here after 5pm."</li>
<li>"That talk was either brilliant or completely over my head."</li>
<li>"I've been fighting this editor for 20 minutes."</li>
<li>"This airport looks exactly the same as the last one."</li>
</ul>
<p style="font-size:.88rem;margin-top:10px;color:#226622;">Gives them something to react to. Feels like talking to a friend.</p>
</div>
<div class="card" style="background:#fffbea;border-color:var(--yellow);">
<div class="card-head" style="border-color:var(--yellow);">⭐ The Hybrid (Best of Both)</div>
<ul>
<li>"That queue moved suspiciously fast. Did you notice they opened a second counter?"</li>
<li>"I always underestimate how loud it gets after 5. Is it always like this?"</li>
<li>"That talk was over my head. You looked like you were following it though."</li>
</ul>
<p style="font-size:.88rem;margin-top:10px;color:#8a6000;">Observation first, then a light question. You share something before asking anything.</p>
</div>
</div>
<div class="hbox hbox-purple">
<div class="hbox-label">THE FORMULA</div>
<p style="margin-top:8px;">
<strong>Notice something → React to it honestly → Let them respond.</strong><br>
You don't need a topic. You don't need a clever line. You just need to say what you're actually noticing in the moment. That's it. That's the whole framework.
</p>
</div>
<h3 style="margin-top:24px;">The Four Observation Types</h3>
<div class="grid-2" style="margin-top:14px;">
<div class="card">
<div class="card-head">🌍 Environmental</div>
<p>Comment on the shared physical reality. The place, the event, the situation you're both in.</p>
<p style="font-size:.9rem;color:#555;">"This coffee shop has somehow gotten louder every time I come back."</p>
</div>
<div class="card">
<div class="card-head">😂 Shared Frustration</div>
<p>Notice something mildly annoying or absurd that you both experience.</p>
<p style="font-size:.9rem;color:#555;">"They really put the wifi password in a 20-character font. Helpful."</p>
</div>
<div class="card">
<div class="card-head">🤔 Honest Reaction</div>
<p>Share your genuine response to something that just happened.</p>
<p style="font-size:.9rem;color:#555;">"I've read that conference schedule three times and I still can't decide."</p>
</div>
<div class="card">
<div class="card-head">😄 Self-Aware Humor</div>
<p>Something slightly self-deprecating or honest about your own experience right now.</p>
<p style="font-size:.9rem;color:#555;">"I came here to work but I've spent 40 minutes choosing a seat."</p>
</div>
</div>
</div>
<!-- ── SECTION 05: Venue Observation Generator ────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">05</span>
<h2>Observation Generator — By Venue</h2>
</div>
<p>Select where you are. Get natural, warm, non-creepy observations you can actually use. Each one is explained so you understand <em>why</em> it works — not just what to say.</p>
<div class="venue-grid" id="venue-buttons"></div>
<div id="openers-output" style="margin-top:8px;min-height:60px;">
<p style="color:#aaa;font-style:italic;font-size:.95rem;">👆 Select a venue above to see natural openers</p>
</div>
</div>
<!-- ── SECTION 06: Roleplay Comic ─────────────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">06</span>
<h2>Roleplay Comic — See It In Action</h2>
</div>
<p>Watch how Friend Mode conversations actually unfold, step by step. Each panel shows what's being said — and a note on the psychology behind it.</p>
<div class="comic-scenario-select" id="comic-scenario-select"></div>
<div class="comic-stage">
<div class="comic-header">
<span id="comic-title">SELECT A SCENARIO ABOVE</span>
<span style="font-size:.8rem;opacity:.7;" id="comic-mode-label">FRIEND MODE</span>
</div>
<div class="comic-body" id="comic-body">
<p style="color:#aaa;font-style:italic;">Select a scenario to start the roleplay.</p>
</div>
<div class="comic-nav">
<button class="comic-nav-btn" id="comic-prev" onclick="comicPrev()" disabled>← PREV</button>
<span class="comic-progress" id="comic-progress"></span>
<button class="comic-nav-btn" id="comic-next" onclick="comicNext()" disabled>NEXT →</button>
</div>
</div>
</div>
<!-- ── SECTION 07: Stop Pedestalizing ────────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">07</span>
<h2>Stop Pedestalizing People</h2>
</div>
<p>The single most common reason technically skilled people freeze around attractive, successful, or famous people is <strong>pedestalizing</strong> — mentally elevating them to a status above normal humans.</p>
<div class="hbox hbox-red">
<div class="hbox-label">WHAT PEDESTALIZING LOOKS LIKE</div>
<div class="grid-2" style="margin-top:12px;">
<div>
<p><strong>In your head:</strong></p>
<ul>
<li>"I need to impress them."</li>
<li>"They talk to interesting people all the time — I need to be interesting."</li>
<li>"What if I say something stupid?"</li>
<li>"I should wait until I have something smart to say."</li>
<li>"They probably don't want to talk to someone like me."</li>
</ul>
</div>
<div>
<p><strong>In their experience of you:</strong></p>
<ul>
<li>You seem tense and uncomfortable.</li>
<li>Your words feel rehearsed.</li>
<li>You ask flattering questions about their work/achievements.</li>
<li>You laugh a little too hard at their jokes.</li>
<li>They feel like they can't be themselves around you.</li>
</ul>
</div>
</div>
</div>
<h3 style="margin-top:24px;">The Reality Check</h3>
<div class="anxiety-compare">
<div class="anxiety-side" style="background:#fffbea;">
<div class="anxiety-head">What You Imagine Their Life Is Like</div>
<div class="anxiety-thought" style="border-color:var(--yellow);background:#fffbea;">Always confident, never awkward</div>
<div class="anxiety-thought" style="border-color:var(--yellow);background:#fffbea;">Surrounded by amazing people</div>
<div class="anxiety-thought" style="border-color:var(--yellow);background:#fffbea;">Never has small talk problems</div>
<div class="anxiety-thought" style="border-color:var(--yellow);background:#fffbea;">Judges people quickly and harshly</div>
<div class="anxiety-thought" style="border-color:var(--yellow);background:#fffbea;">Has high standards for who they talk to</div>
</div>
<div class="anxiety-side" style="background:#edfaea;">
<div class="anxiety-head">What Is Actually True</div>
<div class="anxiety-thought" style="border-color:var(--green);background:#edfaea;">Has their own anxieties and insecurities</div>
<div class="anxiety-thought" style="border-color:var(--green);background:#edfaea;">Often bored at events, looking for real conversation</div>
<div class="anxiety-thought" style="border-color:var(--green);background:#edfaea;">Struggles with awkward silences too</div>
<div class="anxiety-thought" style="border-color:var(--green);background:#edfaea;">Responds well to people who treat them normally</div>
<div class="anxiety-thought" style="border-color:var(--green);background:#edfaea;">Rarely thinks about you as much as you think about them</div>
</div>
</div>
<div class="hbox hbox-blue" style="margin-top:20px;">
<div class="hbox-label">THE EQUAL-STATUS PRINCIPLE</div>
<p style="margin-top:8px;">
Attractive, successful, and high-status people are surrounded by people who treat them like they're on a pedestal. <strong>The most refreshing thing you can do is treat them like a normal human.</strong> Not rudely — just as an equal. Talk to a CEO the same way you'd talk to a friend. Talk to an attractive person the same way you'd talk to a colleague. That calm, equal-status presence is rare — and it's magnetic.
</p>
</div>
</div>
<!-- ── SECTION 08: Practical Challenges ──────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">08</span>
<h2>7-Day Practical Challenges</h2>
</div>
<p>Knowledge without practice is just theory. Each challenge below is low-stakes, specific, and designed to build one skill. Do them in order. Don't skip Day 1 because it seems too easy.</p>
<div class="challenge-cards" id="challenge-cards"></div>
<div class="hbox hbox-green" style="margin-top:24px;">
<div class="hbox-label">THE GOLDEN RULE</div>
<p style="margin-top:8px;">
<strong>The goal of every interaction is not to impress them. It's to make them feel comfortable.</strong> If they walked away feeling at ease, you succeeded — regardless of whether anything "happened." That shift in goal eliminates 90% of social anxiety.
</p>
</div>
</div>
<!-- ── SECTION 09: Daily Practice ─────────────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">09</span>
<h2>Build the Muscle — Micro-Practice Every Day</h2>
</div>
<p>Social confidence is a skill. Skills are built through <strong>repetitions, not theory</strong>. The problem is most people wait for the "right" situation to practice. The trick is turning ordinary daily moments into low-stakes reps — whether or not anything interesting happens.</p>
<div class="hbox hbox-orange" style="margin-bottom:24px;">
<div class="hbox-label">REAL EXAMPLE</div>
<p style="margin-top:8px;">An uncle was trying to take a photo of his wife at a monument. He was struggling to frame them both. Instead of waiting to be asked — just jumped in: <em>"Should I take one of you both together?"</em> He didn't ask for permission to help. He just found a way to be useful. They smiled, said yes, spent 2 minutes talking. That's it. That's a rep. <strong>Nobody asked. Nobody needed to. The opportunity was there and he took it.</strong></p>
</div>
<p>That's the practice mindset: <strong>don't wait for permission to be human.</strong> You're not approaching people. You're just reacting to what's in front of you — and letting them respond however they want.</p>
<h3 style="margin-top:20px;">Daily Micro-Interaction Opportunities</h3>
<p>These happen every day. You don't need to go anywhere special. You just need to stop filtering yourself out of the moment.</p>
<div class="micro-opp-grid" id="micro-opp-grid"></div>
<div class="hbox hbox-blue" style="margin-top:8px;">
<div class="hbox-label">THE RULE</div>
<p style="margin-top:8px;">One micro-interaction per day. Doesn't matter if it goes nowhere. Doesn't matter if they barely respond. <strong>The rep counts the moment you open your mouth.</strong> Over 30 days, you will notice the anxiety is completely gone — not because you learned a script, but because you built the neural pathway.</p>
</div>
<h3 style="margin-top:24px;">The "Jump In" Framework</h3>
<div class="step-flow" style="margin-top:14px;">
<div class="step-item">
<div class="step-num" style="background:var(--orange);color:#fff;">1</div>
<div class="step-body">
<h4>Notice something real</h4>
<p>Not something flattering. Not something clever. Just something genuinely happening right now in front of you. A situation. An inconvenience. Something funny or slightly absurd. Anything.</p>
</div>
</div>
<div class="step-item">
<div class="step-num" style="background:var(--orange);color:#fff;">2</div>
<div class="step-body">
<h4>Find a small way to be useful or react</h4>
<p>Help someone carry something. Ask if they need a photo taken. Hold a door an extra second. Comment on what's right in front of you both. The interaction doesn't need to be long. It needs to be <em>real</em>.</p>
</div>
</div>
<div class="step-item">
<div class="step-num" style="background:var(--orange);color:#fff;">3</div>
<div class="step-body">
<h4>Don't engineer the outcome</h4>
<p>Some people will respond warmly. Some will smile and move on. Some won't even look up. All of these are acceptable outcomes. You're not trying to make a friend every time. You're training yourself to stop filtering.</p>
</div>
</div>
<div class="step-item">
<div class="step-num" style="background:var(--orange);color:#fff;">4</div>
<div class="step-body">
<h4>Count the rep, not the result</h4>
<p>A gym rep is a rep whether the weight was heavy or light. A social rep is a rep whether the conversation lasted 10 seconds or 10 minutes. What you're building is the muscle of <strong>not censoring yourself</strong> before you act.</p>
</div>
</div>
</div>
</div>
<!-- ── SECTION 10: Observations Library ──────────────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">10</span>
<h2>Observations Library — Real Lines, Real Venues</h2>
</div>
<p>These are not scripts. They're examples of what it sounds like when you react to reality instead of hunting for topics. Pick a venue. Read the observations. Notice how none of them are pickup lines, and none of them require the other person to say anything specific back.</p>
<p style="font-size:.9rem;color:#666;">Click any observation to see what a natural follow-up response might look like.</p>
<div class="obs-tabs" id="obs-tabs"></div>
<div class="obs-grid" id="obs-grid"></div>
<div class="obs-secret-box">
<h4>THE SECRET</h4>
<p>Notice that none of these are pickup lines. They're not even really conversation starters. They're just <strong>observations that say: "Hey, we're both humans experiencing the same reality right now."</strong><br><br>
And that's exactly how you'd talk if the person was already your friend. A friend doesn't think <em>"What's the perfect topic?"</em> — a friend notices <em>"This queue is ridiculous"</em> and says it out loud.</p>
</div>
</div>
<!-- ── SECTION 11: Advanced Conversational Moves ─────────── -->
<div class="panel">
<div class="section-head">
<span class="section-num">11</span>
<h2>Advanced Moves — For When You're Already in the Conversation</h2>
</div>
<p>Starting a conversation is only half the skill. The other half is knowing how to <em>play</em> with a topic once it's open — not interrogate it, not perform for it, just play with it like a friend would.</p>
<!-- SWAP: How's work vs What's been keeping you busy -->
<div class="move-block">
<div class="move-block-title">🔄 The Question Upgrade</div>
<p style="margin-bottom:14px;">The words you choose signal whether you're in manager mode or friend mode. These sound similar but land very differently:</p>
<div id="swaps-container"></div>
</div>
<!-- REACTION FIRST -->
<div class="move-block">
<div class="move-block-title">⚡ Reaction First, Question Second</div>
<p style="margin-bottom:16px;">When someone says something interesting, most people immediately ask a new question. That creates an interrogation rhythm. The better move: <strong>react first, then ask.</strong></p>
<div id="reaction-demos"></div>
<div class="hbox hbox-purple" style="margin-top:16px;">
<div class="hbox-label">WHY THIS WORKS</div>
<p style="margin-top:8px;">The reaction shows you actually heard them. It makes them feel seen. The question that follows feels like genuine curiosity — not a checklist. This single shift makes you seem dramatically more engaged and interesting.</p>
</div>
</div>
<!-- THE BILLIARDS SCENARIO -->
<div class="move-block">
<div class="move-block-title">🎱 The Billiards Scenario — In-Group Conversation</div>
<p style="margin-bottom:16px;">This applies to any activity you're doing <em>with</em> someone: billiards, chess, a walk, cooking, gaming, waiting in the same line. The shared activity is the conversation starter. What you do with it is the skill.</p>
<div id="billiards-container"></div>
</div>
<!-- PERSONALITY SPECIFIC OBSERVATIONS -->
<div class="move-block">
<div class="move-block-title">🎯 Personality-Specific Observations</div>
<p style="margin-bottom:14px;">Instead of generic questions, use observations about <em>that specific person</em> based on what you've noticed. These feel personal without being invasive — and they almost always land.</p>
<div id="personality-obs-container"></div>
<div class="hbox hbox-green" style="margin-top:16px;">
<div class="hbox-label">THE PRINCIPLE</div>
<p style="margin-top:8px;">People enjoy talking about observations that feel accurate about them. It signals that you've actually been paying attention — which is rare, and deeply flattering without being flattery.</p>
</div>
</div>
<!-- THE REAL GOAL -->
<div style="border: 4px solid var(--ink); border-radius: 8px; padding: 28px 32px; background: var(--ink); color: #fff; margin-top: 20px; box-shadow: 7px 7px 0 var(--purple);">
<div style="font-family:'Bangers',cursive;font-size:1.4rem;letter-spacing:3px;color:var(--yellow);margin-bottom:16px;">THE REAL GOAL</div>
<p style="font-size:1.1rem;line-height:1.8;margin-bottom:14px;">Your goal should <strong style="color:var(--yellow);">not</strong> be: <em>"How do I keep the conversation going?"</em></p>
<p style="font-size:1.15rem;line-height:1.8;font-weight:700;">A better goal is: <span style="color:var(--yellow);">"How do I make the other person feel like we're already on the same team?"</span></p>
<p style="font-size:.95rem;margin-top:14px;opacity:.8;line-height:1.7;">Same team means: no hierarchy, no performance, no evaluation. Just two people reacting to the same reality together. When someone feels like you're on their team, they open up naturally — and the conversation takes care of itself.</p>
</div>
</div>
</div><!-- /page-wrap -->
<script src="hero-banner.js"></script>
<script src="masthead.js"></script>
<script src="author-card.js"></script>
<script>
/* ─────────────────────────────────────────────────────────
DATA
───────────────────────────────────────────────────────── */
var PRINCIPLES = [
{ num: '1', color: '#e63946', bg: '#fdecea', text: 'People are not interviews.' },
{ num: '2', color: '#1d6fb8', bg: '#e8f0fd', text: 'Conversations are not information-gathering sessions.' },
{ num: '3', color: '#3fa34d', bg: '#edfaea', text: 'Friends don\'t hunt for topics. Friends react to reality together.' },
{ num: '4', color: '#ff8c42', bg: '#fff3ea', text: 'Attractive, successful, or high-status people are still normal humans.' },
{ num: '5', color: '#8a4fff', bg: '#f3eeff', text: 'Curiosity creates connection. Evaluation creates anxiety.' },
{ num: '6', color: '#0d9488', bg: '#e6f7f6', text: 'The goal is not to impress people. The goal is to understand them.' },
{ num: '7', color: '#ff6b9d', bg: '#ffeef5', text: 'Observations are often better than questions.' },
{ num: '8', color: '#ffd23f', bg: '#fffbea', text: 'Share thoughts, opinions, and reactions before asking questions.' },
{ num: '9', color: '#1d6fb8', bg: '#e8f0fd', text: 'Talk as if the other person is a friend you haven\'t met yet.' },
{ num: '10', color: '#e63946', bg: '#fdecea', text: 'Help yourself stop pedestalizing attractive or successful people.' }
];
var VENUES = {
'coffee-shop': {
label: '☕ Coffee Shop',
openers: [
{
quote: '"I always feel guilty when I\'ve been here more than an hour. They\'re so patient."',
why: '<strong>Why it works:</strong> Self-aware + relatable + not directed at them. They can laugh, agree, or say "same." Low-stakes entry that feels like thinking out loud.'
},
{
quote: '"That playlist just shifted genres about four times in five minutes."',
why: '<strong>Why it works:</strong> Environmental observation. You\'re both experiencing the same thing. Commenting on it creates instant shared experience with zero pressure.'
},
{
quote: '"I come in here for one thing and always end up with three. I have no idea how that happens."',
why: '<strong>Why it works:</strong> Self-deprecating, honest, and common enough that most people relate immediately. It\'s not about them at all — which paradoxically makes them want to respond.'
}
]
},
'conference': {
label: '🎤 Conference',
openers: [
{
quote: '"That last talk was either brilliant or completely over my head. I\'m still deciding."',
why: '<strong>Why it works:</strong> Honest and funny. It creates an opening for them to share their take — which is what people actually want to do. You\'re not asking them to evaluate themselves, you\'re inviting them to evaluate a thing.'
},
{
quote: '"I\'ve read the schedule three times and I still can\'t tell which track I\'m supposed to be in."',
why: '<strong>Why it works:</strong> Shared confusion at conferences is universal. This observation signals you\'re approachable and that the conversation will be effortless.'
},
{
quote: '"The free coffee here is surprisingly good. I was fully prepared to suffer through it."',
why: '<strong>Why it works:</strong> Unexpected specificity. Low stakes. The bar was low, the result surprised you. This kind of micro-observation is what real conversations are made of.'
}
]
},
'gym': {
label: '🏋️ Gym',
openers: [
{
quote: '"That machine always makes me feel like I\'m doing it wrong even when I\'m definitely doing it right."',
why: '<strong>Why it works:</strong> Self-aware and relatable. At the gym everyone has equipment they feel uncertain about. Shared vulnerability is connection.'
},
{
quote: '"I don\'t know how people listen to podcasts while doing this. My brain goes completely blank."',
why: '<strong>Why it works:</strong> You\'re sharing something true about your experience. It\'s not flattery. It\'s not a question. It\'s just an honest observation that invites their take.'
},
{
quote: '"This place gets completely different on Monday evenings. I always forget."',
why: '<strong>Why it works:</strong> Environmental + slight self-deprecation. It implies you\'re a regular (social proof) without bragging. You\'re observing a pattern you share.'
}
]
},
'coworking': {
label: '💻 Coworking',
openers: [
{
quote: '"I came here to focus and have somehow spent 30 minutes figuring out where to sit."',
why: '<strong>Why it works:</strong> The "overthinking workspace" experience is deeply relatable to anyone who works independently. It\'s honest, a little self-deprecating, and needs zero context.'
},
{
quote: '"The wifi here is either really fast or really slow and I can never predict which one it will be."',
why: '<strong>Why it works:</strong> Universal shared frustration. Technical people especially relate to unreliable internet as a minor daily nemesis. Instant bond over shared suffering.'
},
{
quote: '"I think they changed something about the A/C. It\'s either colder than before or I\'m just more aware of it now."',
why: '<strong>Why it works:</strong> Hyperspecific environmental observation. It signals that you\'re present and paying attention — and it gives them something amusing and concrete to respond to.'
}
]
},
'airport': {
label: '✈️ Airport',
openers: [
{
quote: '"I\'ve been staring at that departure board for 15 minutes hoping my gate would change. It hasn\'t."',
why: '<strong>Why it works:</strong> Everyone in an airport knows this feeling. Shared waiting + mild frustration + self-awareness = instant relatable opener. No explanation needed.'
},
{
quote: '"Every airport looks the same to me after a while. Same shops, different city."',
why: '<strong>Why it works:</strong> A genuine observation that many frequent travellers share. It opens space for them to agree, disagree, or share their own airport observation.'
},
{
quote: '"I can never decide whether to eat before or after security and I always regret whatever I choose."',
why: '<strong>Why it works:</strong> The micro-indecision of airport eating is a genuinely universal experience. It\'s specific enough to feel real and funny enough to invite a reaction.'
}
]
},
'bookstore': {
label: '📚 Bookstore',
openers: [
{
quote: '"I came in for one specific thing and now I\'m holding four books and reconsidering my entire reading list."',
why: '<strong>Why it works:</strong> Anyone who loves bookstores has experienced this exact gravitational pull. Honest + relatable + no pressure on them whatsoever.'
},
{
quote: '"I always think I\'ll remember which books I wanted. I never remember which books I wanted."',
why: '<strong>Why it works:</strong> The gap between intention and reality is funny and universal. It\'s completely about you — which makes it easy for them to chime in with their own version.'
},
{
quote: '"That display is doing a surprisingly good job. I walked in with a plan and now I have no plan."',
why: '<strong>Why it works:</strong> You\'re reacting to your immediate environment. It\'s honest and slightly amused. The phrase "now I have no plan" is an implicit invitation to connect over shared chaos.'
}
]
},
'language-exchange': {
label: '🌍 Language Exchange',
openers: [
{
quote: '"I just spent 10 minutes trying to explain the word \'anyway\' and I still don\'t know what it actually means."',
why: '<strong>Why it works:</strong> Language learners bond instantly over the gaps in their own understanding. Self-aware humor about learning is disarming and relatable to everyone in the room.'
},
{
quote: '"I\'ve realised I know words in this language that I don\'t even know the English equivalent of."',
why: '<strong>Why it works:</strong> This is a genuine linguistic phenomenon many language learners experience. It opens a fascinating conversation without forcing anything.'
},
{
quote: '"My vocabulary is great until someone actually wants to have a conversation. Then everything disappears."',
why: '<strong>Why it works:</strong> This is the most relatable language learning experience on the planet. Zero stakes. Instant connection. The laughter that follows is the conversation.'
}
]
}
};
var ROLEPLAY_SCENARIOS = {
'conference': {
label: '🎤 Conference',
title: 'TECH CONFERENCE — COFFEE BREAK',
steps: [
{
type: 'scene',
label: 'THE SITUATION',
content: 'You\'re at a tech conference coffee break. Someone is standing near you, also waiting for coffee, also looking at their phone. They just came out of the same talk as you.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'you', text: '"That last talk was either brilliant or completely over my head. I\'m still deciding."', tone: 'good' }
],
insight: '✅ You\'re reacting to a shared experience. No question, no pressure. You\'re just thinking out loud. They can agree, laugh, or share their take.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'them', text: '"Ha — same. I felt confident for the first 10 minutes and then he started talking about Bloom filters and I mentally checked out."', tone: 'good' }
],
insight: '🎯 They opened up. Now you know something about them (they know what Bloom filters are), their sense of humor, and their level. No interrogation needed.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'you', text: '"That\'s exactly the point where it happened to me too. I was like — okay, I\'m just here for the snacks now."', tone: 'good' },
{ side: 'them', text: '"The snacks are honestly the best part. I saw them setting up samosas in the next room."', tone: 'good' }
],
insight: '🔥 The conversation now has genuine momentum. You both feel comfortable. Neither person is performing. This is friend mode — it happened in under 60 seconds.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'you', text: '"Wait — are we skipping the next session for samosas? Because I think we should be honest with ourselves here."', tone: 'good' },
{ side: 'them', text: '"I came to this conference for the networking. This counts as networking."', tone: 'good' }
],
insight: '✨ Notice: you still don\'t know their name, their company, or their role. You might ask those things eventually — but they\'ll feel natural now, not interrogational. The connection came first.'
}
]
},
'coffee-shop': {
label: '☕ Coffee Shop',
title: 'COFFEE SHOP — SOMEONE WORKING NEARBY',
steps: [
{
type: 'scene',
label: 'THE SITUATION',
content: 'You\'re at a coffee shop. Someone attractive is sitting at the table next to you, working on a laptop. You\'ve been here an hour and the place has gotten very loud.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'you', text: '"It got loud really fast in here. I always underestimate how much this place fills up after 5."', tone: 'good' }
],
insight: '✅ Environmental observation. Not directed at them specifically — just someone nearby. Zero threat. Zero pressure. They can choose to respond or not.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'them', text: '"Right? I come here specifically because mornings are quiet and then I always stay too long."', tone: 'good' }
],
insight: '🎯 They responded with something real about themselves. You now know they\'re a regular, a morning person, and they also struggle to leave. Natural, honest, no agenda.'
},
{
type: 'dialogue',
bubbles: [
{ side: 'you', text: '"I do the same thing. I tell myself I\'ll leave by 3 and then it\'s 6 and I\'ve ordered three coffees."', tone: 'good' },
{ side: 'them', text: '"Three is my record too. I feel like that\'s the unofficial limit before it becomes a problem."', tone: 'good' }
],
insight: '🔥 Shared experience + light humor. Neither person is performing. They feel completely comfortable because you\'re talking about you — not interrogating them about them.'
},
{
type: 'dialogue',
bubbles: [