Repository navigation
Expand file tree
/
Copy pathstudio.html
More file actions
2096 lines (1948 loc) · 164 KB
/
Copy pathstudio.html
File metadata and controls
2096 lines (1948 loc) · 164 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>CarboxMol Studio · Interactive 3D Macromolecular Crystallography & GROMACS MD Suite</title>
<!-- Comprehensive Search Engine Optimization (SEO) -->
<meta name="description"
content="Interactive 3D WebGL crystallography studio powered by 3Dmol.js and GROMACS 2026. Real-time carboxyl protonation detection, 2Fo-Fc electron density carving, and in-browser molecular dynamics simulations.">
<meta name="keywords"
content="CarboxMol Studio, 3D protein viewer, GROMACS Web, molecular dynamics, electron density map, 2Fo-Fc, PDB-REDO, crystallographic unit cell, protonation states, active site microenvironment, pdb2gmx, mdrun, structural bioinformatics, 3Dmol.js, CCP4, Gemmi, low-barrier hydrogen bond, LBHB">
<meta name="theme-color" content="#090d16">
<meta name="author" content="Suleiman M Hajizadeh & Garib N Murshudov">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<!-- Canonical URL and Multilingual Alternates -->
<link rel="canonical" href="https://carboxmol.github.io/studio.html">
<link rel="alternate" hreflang="en" href="https://carboxmol.github.io/studio.html?lang=en">
<link rel="alternate" hreflang="az" href="https://carboxmol.github.io/studio.html?lang=az">
<link rel="alternate" hreflang="he" href="https://carboxmol.github.io/studio.html?lang=he">
<link rel="alternate" hreflang="x-default" href="https://carboxmol.github.io/studio.html">
<!-- Open Graph / Facebook / LinkedIn / WhatsApp -->
<meta property="og:site_name" content="CarboxMol Studio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://carboxmol.github.io/studio.html">
<meta property="og:title" content="CarboxMol Studio · Interactive 3D Macromolecular Crystallography & GROMACS MD Suite">
<meta property="og:description"
content="Interactive 3D WebGL crystallography studio powered by 3Dmol.js and GROMACS 2026. Real-time carboxyl protonation detection, 2Fo-Fc electron density carving, and in-browser molecular dynamics simulations.">
<meta property="og:image" content="https://carboxmol.github.io/assets/carboxmol_logo.png">
<meta property="og:image:alt" content="CarboxMol 3D Studio">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="az_AZ">
<meta property="og:locale:alternate" content="he_IL">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CarboxMol Studio · Interactive 3D Macromolecular Crystallography & GROMACS MD Suite">
<meta name="twitter:description"
content="Interactive 3D WebGL crystallography studio powered by 3Dmol.js and GROMACS 2026. Real-time carboxyl protonation detection, 2Fo-Fc electron density carving, and in-browser molecular dynamics simulations.">
<meta name="twitter:image" content="https://carboxmol.github.io/assets/carboxmol_logo.png">
<meta name="twitter:image:alt" content="CarboxMol 3D Studio">
<!-- Structured Data: Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebApplication",
"@id": "https://carboxmol.github.io/studio.html#app",
"url": "https://carboxmol.github.io/studio.html",
"name": "CarboxMol Studio",
"applicationCategory": "ScientificSoftware",
"browserRequirements": "Requires WebGL enabled browser",
"operatingSystem": "All modern browsers (Chrome, Safari, Firefox, Edge)",
"description": "Enterprise Macromolecular Crystallography Studio with real-time 3D rendering, electron density maps, and GROMACS molecular dynamics integration.",
"featureList": [
"3D Macromolecular Viewport with 3Dmol.js",
"GROMACS 2026 Molecular Dynamics Suite",
"Real-Time Carboxyl Protonation Detection",
"2Fo-Fc & Fo-Fc Electron Density Maps (PDB-REDO / CCP4)",
"Crystallographic Unit Cell Wireframe & Symmetry Engine",
"Trilingual Interface (EN, AZ, HE)"
],
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://carboxmol.github.io/studio.html#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://carboxmol.github.io/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Studio",
"item": "https://carboxmol.github.io/studio.html"
}
]
}
]
}
</script>
<!-- Progressive Web App (Silent / Add to Home Screen) -->
<link rel="manifest" href="manifest-carboxmol.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="CarboxMol">
<meta name="application-name" content="CarboxMol">
<link rel="icon" type="image/png" sizes="32x32" href="assets/carboxmol_favicon32.png">
<link rel="icon" type="image/png" sizes="64x64" href="assets/carboxmol_favicon64.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/carboxmol_pwa_icon_192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/carboxmol_pwa_icon_512.png">
<link rel="shortcut icon" href="assets/carboxmol_favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/carboxmol_apple_touch_icon.png">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="studio.css?v=0.4.5">
<script defer src="pwa-sync.js?v=0.4.5"></script>
<!-- 3Dmol.js Engine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.0.4/3Dmol-min.js"></script>
<script>
if (typeof $3Dmol === 'undefined' && typeof window['3Dmol'] !== 'undefined') {
window.$3Dmol = window['3Dmol'];
}
if (typeof $3Dmol === 'undefined' || typeof $3Dmol.createViewer !== 'function') {
document.write('<script src="libs/3Dmol-min.js"><\/script>');
}
</script>
<script>
if (typeof $3Dmol === 'undefined' && typeof window['3Dmol'] !== 'undefined') {
window.$3Dmol = window['3Dmol'];
}
</script>
</head>
<body>
<!-- ─── Top Studio Navbar ────────────────────────────────────────────────── -->
<header class="studio-header">
<!-- 1. Left Group: Brand, Portal Links & Structure Fetch -->
<div class="studio-header-group studio-header-left">
<a href="studio.html" class="studio-brand" title="CarboxMol 3D Crystallographic Workbench">
<div class="studio-brand-logo-wrap">
<img src="assets/carboxmol_logo.png?v=0.4.5" alt="CarboxMol Logo" class="brand-logo-img"
onerror="this.onerror=null; this.src='assets/carboxmol_logo.png?v=0.4.5';">
</div>
<span class="brand-title">CarboxMol</span>
<span class="brand-badge" id="studio-version-badge" data-i18n="brand_badge">v0.4.5</span>
</a>
<div class="studio-pill-group studio-nav-cross-links">
<a href="dashboard.html" class="btn-studio" title="Carbox Dashboard">
<img src="assets/carbox_logo.png" alt="Carbox" class="nav-cross-icon"> <span data-i18n="btn_nav_dashboard">Carbox</span>
</a>
<button type="button" class="btn-studio" id="btn-studio-download-hub" title="Open Carbox Downloads & OS Installation Hub (macOS, Linux, Windows, PWA)">
<img src="assets/download_favicon32.png" alt="Downloads" class="nav-cross-icon"> <span data-i18n="btn_nav_downloads">Downloads</span>
</button>
<a href="docs.html" class="btn-studio" title="Open Documentation Portal">
<img src="assets/docs_favicon32.png" alt="Docs" class="nav-cross-icon"> <span data-i18n="btn_nav_docs">Docs</span>
</a>
</div>
<div class="studio-loader-bar">
<div class="loader-input-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="studio-pdb-input" placeholder="PDB ID..." maxlength="25"
data-i18n-ph="fetch_input_ph">
</div>
<button type="button" class="btn-studio primary" id="btn-studio-load">
<i class="fa-solid fa-bolt"></i> <span data-i18n="btn_fetch">Fetch</span>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-clear" title="Clear structure and return to welcome screen" style="display: none;">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<!-- 2. Center Group: Panels Dock Controller & Workbench Modules (Icons Only) -->
<div class="studio-header-group studio-header-center">
<!-- Segmented Layout Dock Controller (Left / Split Arrow / Right) -->
<div class="studio-pill-group studio-dock-controller" title="Workbench Panel Layout">
<button type="button" class="btn-studio dock-ctrl-btn" id="btn-top-toggle-left" title="Toggle Left Inspector Panel (L or [)" aria-label="Toggle Left Panel">
<i class="fa-solid fa-table-columns" style="color: #38bdf8;"></i> <span data-i18n="btn_panel_left">Left</span>
</button>
<button type="button" class="btn-studio dock-ctrl-btn" id="btn-top-toggle-split" title="Toggle Both Panels (Split Workstation)" aria-pressed="false" aria-label="Toggle Split Workstation">
<i class="fa-solid fa-arrows-split-up-and-left"></i>
</button>
<button type="button" class="btn-studio dock-ctrl-btn" id="btn-top-toggle-right" title="Toggle Right Telemetry Panel (R or ])" aria-label="Toggle Right Panel">
<i class="fa-solid fa-table-columns fa-flip-horizontal" style="color: #f59e0b;"></i> <span data-i18n="btn_panel_right">Right</span>
</button>
</div>
<!-- Workbench Option Modules Pill (Icons Only) -->
<div class="studio-pill-group studio-options-pill-group" title="Workbench Modules">
<!-- Left Sidebar Panels -->
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-pairs" data-target="studio-section-pairs" data-panel="left" title="Discovered Asp/Glu Pairs (Pairs)" aria-label="Pairs">
<i class="fa-solid fa-crosshairs" style="color: #38bdf8;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-proton" data-target="studio-section-proton" data-panel="left" title="Carboxyl Protonation States & LBHB (Protonation)" aria-label="Protonation States">
<i class="fa-solid fa-atom" style="color: #06b6d4;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-style" data-target="studio-section-style" data-panel="left" title="Representation & Visual Styling (Style)" aria-label="Style">
<i class="fa-solid fa-palette" style="color: #ec4899;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-density" data-target="studio-section-density" data-panel="left" title="2Fo-Fc & Difference Density Maps (Density)" aria-label="Density">
<i class="fa-solid fa-cube" style="color: #22c55e;"></i>
</button>
<div class="opt-separator"></div>
<!-- Right Sidebar Panels -->
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-geometry" data-target="studio-geom-telemetry" data-panel="right" title="Live Geometric Signatures (Geometry)" aria-label="Geometry">
<i class="fa-solid fa-chart-line" style="color: #f59e0b;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-audit" data-target="studio-density-validation-section" data-panel="right" title="Density & Model Validation (Density Validation)" aria-label="Density Validation">
<i class="fa-solid fa-shield-halved" style="color: #10b981;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-atom-auditor" data-target="studio-atom-audit-section" data-panel="right" title="Carbox Atom Auditor (Atom Auditor)" aria-label="Atom Auditor">
<i class="fa-solid fa-microchip" style="color: #34d399;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-proton-sim" data-target="studio-proton-sim-section" data-panel="right" title="Protonation Simulation & Validation (PES Simulation)" aria-label="Protonation Simulation">
<i class="fa-solid fa-wave-square" style="color: #818cf8;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-metals" data-target="studio-metal-coord-section" data-panel="right" title="Metal Coordination & Coloring (Metals)" aria-label="Metals">
<i class="fa-solid fa-gem" style="color: #c084fc;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-measurements" data-target="studio-section-measurements" data-panel="right" title="Atomic Measurements (Measure)" aria-label="Measurements">
<i class="fa-solid fa-ruler-combined" style="color: #38bdf8;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-unitcell" data-target="studio-section-unitcell" data-panel="right" title="Unit Cell & Symmetry (Unit Cell)" aria-label="Unit Cell">
<i class="fa-solid fa-cubes" style="color: #60a5fa;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-microenv" data-target="studio-section-microenv" data-panel="right" title="Microenvironment & pKa (pKa)" aria-label="Microenvironment">
<i class="fa-solid fa-flask" style="color: #f472b6;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-dbregistry" data-target="studio-db-registry-section" data-panel="right" title="Database Cross-References (Databases)" aria-label="Databases">
<i class="fa-solid fa-database" style="color: #2dd4bf;"></i>
</button>
<button type="button" class="btn-studio icon-only opt-panel-btn" id="btn-opt-tools" data-target="studio-refine-section" data-panel="right" title="Refinement & Restraints Suite (Refinement)" aria-label="Refinement">
<i class="fa-solid fa-sliders" style="color: #38bdf8;"></i>
</button>
</div>
</div>
<!-- 3. Right Group: Quick Tools, Go to Atom, Viewport Controls & Language -->
<div class="studio-header-group studio-header-right">
<!-- Analysis & Benchmark Tools Pill (Icons Only) -->
<div class="studio-pill-group studio-quick-tools">
<button type="button" class="btn-studio icon-only" id="btn-studio-ref-structures" title="Benchmark Reference Structures Gallery (Benchmarks)" aria-label="Benchmarks">
<i class="fa-solid fa-gem" style="color: #a855f7;"></i>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-macro-console" title="CarboxMol .CXL Live Script Console (Console - M)" aria-label="Console">
<i class="fa-solid fa-terminal" style="color: #10b981;"></i>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-ligands" title="Ligand & Binding Pocket 3D Interactions Engine (Ligand 3D)" aria-label="Ligand 3D">
<i class="fa-solid fa-capsules" style="color: #38bdf8;"></i> <span class="badge-count" id="badge-ligand-count" style="display: none;">0</span>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-gromacs-md" title="GROMACS Molecular Dynamics Simulation Suite (GROMACS MD)" aria-label="GROMACS MD">
<i class="fa-solid fa-atom" style="color: #38bdf8;"></i>
</button>
</div>
<button type="button" class="btn-studio" id="btn-studio-goto-atom" title="Go to Specific Residue or Atom (⌘G / Ctrl+G)" data-i18n-title="btn_goto_atom_title">
<i class="fa-solid fa-location-crosshairs"></i> <span data-i18n="btn_goto_atom">Go to Atom</span> <kbd class="header-kbd">⌘G</kbd>
</button>
<!-- Utility Controls Pill -->
<div class="studio-pill-group">
<button type="button" class="btn-studio icon-only" id="btn-studio-snapshot" title="Save High-Res 4K Snapshot (P)" data-i18n-title="btn_snapshot_title">
<i class="fa-solid fa-camera"></i>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-fullscreen" title="Toggle Full 3D View (F)" data-i18n-title="btn_fullscreen_title">
<i class="fa-solid fa-expand"></i>
</button>
<button type="button" class="btn-studio icon-only" id="btn-studio-shortcuts" title="Keyboard Shortcuts (? / H)" data-i18n-title="btn_shortcuts_title">
<i class="fa-solid fa-keyboard"></i>
</button>
</div>
<!-- Language Flags Selector (UK, Azerbaijan, Israel) -->
<div class="studio-pill-group studio-lang-flags" role="group" aria-label="Language Selector" title="Language / Dil / שפה">
<button type="button" class="btn-studio lang-flag-btn active" data-lang="en" title="English (UK)" aria-label="English (UK)">
<svg class="lang-flag-svg" viewBox="0 0 60 30" width="18" height="12" aria-hidden="true">
<clipPath id="uk-flag-clip"><path d="M0,0 v30 h60 v-30 z"/></clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#uk-flag-clip)" stroke="#C8102E" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
</svg>
<span class="lang-flag-code">EN</span>
</button>
<button type="button" class="btn-studio lang-flag-btn" data-lang="az" title="Azərbaycan dili (Azerbaijan)" aria-label="Azərbaycan dili (Azerbaijan)">
<svg class="lang-flag-svg" viewBox="0 0 1200 600" width="18" height="12" aria-hidden="true">
<rect width="1200" height="200" fill="#00b5e2"/>
<rect y="200" width="1200" height="200" fill="#ef3340"/>
<rect y="400" width="1200" height="200" fill="#509e2f"/>
<circle cx="570" cy="300" r="90" fill="#fff"/>
<circle cx="590" cy="300" r="75" fill="#ef3340"/>
<polygon points="650,300 665,310 660,328 676,322 682,338 692,324 708,331 704,313 720,307 708,296 720,285 704,279 708,261 692,268 682,254 676,270 660,264 665,282" fill="#fff"/>
</svg>
<span class="lang-flag-code">AZ</span>
</button>
<button type="button" class="btn-studio lang-flag-btn" data-lang="he" title="עברית (Israel)" aria-label="עברית (Israel)">
<svg class="lang-flag-svg" viewBox="0 0 1100 800" width="18" height="12" aria-hidden="true">
<rect width="1100" height="800" fill="#fff"/>
<rect y="75" width="1100" height="100" fill="#0038b8"/>
<rect y="625" width="1100" height="100" fill="#0038b8"/>
<g stroke="#0038b8" stroke-width="27" fill="none">
<polygon points="550,265 675,480 425,480"/>
<polygon points="550,535 675,320 425,320"/>
</g>
</svg>
<span class="lang-flag-code">HE</span>
</button>
</div>
<!-- PWA Standalone Mode Badge -->
<div class="pwa-standalone-badge" id="badge-pwa-standalone" title="Running in CarboxMol Native App" style="display: none;">
<i class="fa-solid fa-circle-check"></i> <span>App Mode</span>
</div>
</div>
</header>
<!-- ─── Main Workbench Grid ──────────────────────────────────────────────── -->
<main class="studio-main collapsed-left collapsed-right" id="studio-main-grid">
<!-- Left Inspector Panel -->
<aside class="studio-sidebar-left">
<!-- Mobile Drawer Header -->
<div class="sidebar-drawer-header mobile-only">
<span class="drawer-title"><i class="fa-solid fa-table-columns" style="color: #38bdf8;"></i> <span data-i18n="drawer_left_title">Inspector & Tools</span></span>
<button type="button" class="btn-studio icon-only btn-close-drawer" id="btn-close-left-drawer" title="Close Panel" aria-label="Close Panel" data-i18n-title="btn_close_drawer">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<!-- Discovered Pairs Module -->
<div class="studio-section" id="studio-section-pairs">
<div class="section-header">
<span class="section-title"><i class="fa-solid fa-crosshairs"></i> <span
data-i18n="heading_pairs">Discovered Asp/Glu Pairs</span></span>
<span class="section-badge" id="studio-pairs-count">0 Pairs</span>
</div>
<div class="pair-list-wrap" id="studio-pair-list">
<!-- Dynamic Pair Cards -->
</div>
</div>
<!-- Protonation & pKa Modeling Module -->
<div class="studio-section" id="studio-section-proton">
<div class="section-header">
<span class="section-title"><i class="fa-solid fa-atom"></i> <span
data-i18n="heading_proton_states">Protonation States</span></span>
<span class="section-badge" id="studio-active-state-badge">Bare Native</span>
</div>
<div class="pill-grid">
<button class="studio-pill active" id="pill-bare" data-state="none"><i class="fa-solid fa-dna"></i> <span
data-i18n="pill_bare">Bare Native</span></button>
<button class="studio-pill" id="pill-anionic" data-state="anionic"><i class="fa-solid fa-minus"></i>
<span data-i18n="pill_anionic">Anionic (-COO⁻)</span></button>
<button class="studio-pill" id="pill-ash" data-state="ash"><i class="fa-solid fa-plus"></i> <span
data-i18n="pill_ash">Neutral ASH</span></button>
<button class="studio-pill" id="pill-glh" data-state="glh"><i class="fa-solid fa-plus"></i> <span
data-i18n="pill_glh">Neutral GLH</span></button>
<button class="studio-pill" id="pill-lbhb" data-state="lbhb"><i class="fa-solid fa-bolt"></i> <span
data-i18n="pill_lbhb">Shared LBHB</span></button>
</div>
</div>
<!-- Representation & View Controls Module -->
<div class="studio-section" id="studio-section-style">
<div class="section-header">
<span class="section-title"><i class="fa-solid fa-eye"></i> <span
data-i18n="heading_repr">Representation & Color</span></span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px;">
<button class="studio-pill active" id="btn-studio-cartoon" title="Backbone Cartoon Ribbon"><i class="fa-solid fa-ribbon"></i> <span
data-i18n="btn_cartoon">Cartoon</span></button>
<button class="studio-pill active" id="btn-studio-sidechains" title="Display all amino acid sidechains in sticks across the entire protein"><i class="fa-solid fa-code-branch"></i> <span
data-i18n="btn_sidechains">All Sidechains</span></button>
<button class="studio-pill" id="btn-studio-allatoms" title="Display 100% of all atoms (backbone + sidechains + ligands) as sticks"><i class="fa-solid fa-circle-nodes"></i> <span
data-i18n="btn_allatoms">All Atoms (Sticks)</span></button>
<button class="studio-pill" id="btn-studio-lines" title="Display all atoms in crystallographic wireframe lines"><i class="fa-solid fa-bezier-curve"></i> <span
data-i18n="btn_lines">Wireframe (Lines)</span></button>
<button class="studio-pill active" id="btn-studio-pocket" title="Highlight 4.5Å binding pocket in sticks"><i class="fa-solid fa-circle-dot"></i> <span
data-i18n="btn_pocket">4.5Å Pocket</span></button>
<button class="studio-pill" id="btn-studio-spheres" title="Space-filling van der Waals spheres"><i class="fa-solid fa-atom"></i> <span
data-i18n="btn_spheres">Spacefill (Spheres)</span></button>
<button class="studio-pill" id="btn-studio-hbonds"><i class="fa-solid fa-link"></i> <span
data-i18n="btn_hbonds">H-Bonds (≤3.5Å)</span></button>
<button class="studio-pill" id="btn-studio-bfactor"><i class="fa-solid fa-fire-flame-curved"></i>
<span data-i18n="btn_bfactor">B-Factor Heatmap</span></button>
<button class="studio-pill" id="btn-studio-unitcell"><i class="fa-solid fa-cube"></i> <span
data-i18n="btn_unitcell">Unit Cell Box</span></button>
<button class="studio-pill" id="btn-studio-waters"><i class="fa-solid fa-droplet"></i> <span
data-i18n="btn_waters">Solvent Waters</span></button>
</div>
<!-- Stick Color Scheme (CarboxMol / Rainbow / Residue) -->
<div class="density-control-row" style="margin-top: 10px;">
<div class="density-control-label">
<span><i class="fa-solid fa-palette" style="color: #a855f7;"></i> <span data-i18n="lbl_stick_color">Color Scheme</span></span>
<strong id="studio-stick-color-val" style="color: #facc15;">CarboxMol (Yellow C)</strong>
</div>
<div style="display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4px; margin-top: 5px;">
<button class="studio-pill active" id="btn-stick-color-gemmimol" data-scheme="gemmimol" title="CarboxMol Crystallographic Standard: Golden-Yellow Carbons, Red Oxygens, Blue Nitrogens, Pink Waters" style="font-size: 10.5px; padding: 4px 5px;" data-i18n="btn_stick_gemmimol"><i class="fa-solid fa-gem" style="color: #facc15; margin-right: 3px;"></i>CarboxMol</button>
<button class="studio-pill" id="btn-stick-color-spectrum" data-scheme="spectrum" title="Rainbow Spectrum along sequence" style="font-size: 10.5px; padding: 4px 5px;" data-i18n="btn_stick_rainbow"><i class="fa-solid fa-rainbow" style="color: #38bdf8; margin-right: 3px;"></i>Rainbow</button>
<button class="studio-pill" id="btn-stick-color-type" data-scheme="type" title="By Residue Type (Acidic, Basic, Polar, Hydrophobic)" style="font-size: 10.5px; padding: 4px 5px;" data-i18n="btn_stick_residue"><i class="fa-solid fa-shapes" style="color: #ec4899; margin-right: 3px;"></i>Residue</button>
</div>
</div>
<!-- Slab / Depth Clipping -->
<div class="density-control-row" style="margin-top: 10px;">
<div class="density-control-label">
<span><i class="fa-solid fa-layer-group"></i> <span data-i18n="lbl_slab">Slab / Clipping</span></span>
<strong id="studio-slab-val" style="color: var(--accent-cyan);">12 Å</strong>
</div>
<input type="range" id="studio-slab-range" min="4" max="100" step="2" value="12"
class="density-slider-studio" title="Adjust depth slice / slab thickness">
</div>
<!-- Crystallographic Depth Cueing & Contrast Dial -->
<div class="density-control-row" style="margin-top: 8px;">
<div class="density-control-label">
<span><i class="fa-solid fa-circle-half-stroke" style="color: #38bdf8;"></i> <span data-i18n="lbl_contrast_depth">Contrast & Depth Fog</span></span>
<strong id="studio-contrast-val" style="color: var(--accent-cyan);">High (100%)</strong>
</div>
<input type="range" id="studio-contrast-range" min="0" max="100" step="5" value="100"
class="density-slider-studio" title="Dərinlik dumanı və kontrast / Distant residues fade into dark shadow, foreground illuminated">
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px;">
<button class="studio-pill active" id="btn-studio-depthfog" title="Uzaqda olanlar qaranlığa düşür (Depth Fog) / Distant residues fade into dark shadow">
<i class="fa-solid fa-smog"></i> <span data-i18n="btn_depth_fog">Depth Fog</span>
</button>
<button class="studio-pill active" id="btn-studio-whitefocus" title="Yaxında ağ/aydın parlaq görünüş (White Focus) / Focused pair in crisp white carbon highlights">
<i class="fa-solid fa-sun" style="color: #fbbf24;"></i> <span data-i18n="btn_white_focus">White Focus</span>
</button>
</div>
</div>
<!-- Crystallographic Electron Density Module (Carbox Density Engine) -->
<div class="studio-section" id="studio-section-density">
<div class="section-header">
<span class="section-title"><i class="fa-solid fa-cube"></i> <span
data-i18n="heading_density">Electron Density Maps</span></span>
<span class="section-badge" id="studio-density-badge">PDB-REDO / EBI</span>
</div>
<!-- Crystallographic Electron Density Data Source (PDB-REDO / PDBe) -->
<div class="density-source-card" style="margin-bottom: 8px; padding: 6px 8px; background: rgba(0,0,0,0.35); border-radius: 6px; border: 1px solid rgba(56,189,248,0.25);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
<span style="font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; display: flex; align-items: center; gap: 5px;">
<i class="fa-solid fa-server" style="color: #38bdf8;"></i>
<span data-i18n="lbl_density_source">Data Source:</span>
</span>
<a href="https://pdb-redo.eu/" target="_blank" rel="noopener noreferrer" class="density-pdb-redo-link" id="link-pdb-redo-main" style="font-size: 9.5px; color: #38bdf8; text-decoration: none; display: flex; align-items: center; gap: 3px; font-weight: 600;" title="PDB-REDO - Fully automated crystallographic re-refinement & reflection validation (https://pdb-redo.eu/)">
<span>pdb-redo.eu</span> <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 8px;"></i>
</a>
</div>
<div style="display: flex; gap: 4px; align-items: center;">
<button type="button" class="source-chip active" id="btn-src-pdb-redo" data-source="pdb-redo" title="PDB-REDO Re-refined Electron Density Maps & Structure Factors (https://pdb-redo.eu/)">
<i class="fa-solid fa-rotate" style="color: #38bdf8;"></i> <strong style="font-weight: 700;">PDB-REDO</strong>
</button>
<button type="button" class="source-chip" id="btn-src-pdbe" data-source="pdbe" title="PDBe / EMBL-EBI WWPDB Deposited Electron Density Maps">
<i class="fa-solid fa-atom" style="color: #94a3b8;"></i> <span>PDBe (EBI)</span>
</button>
<button type="button" class="chip-btn" id="btn-download-mtz" style="margin-left: auto; font-size: 9px; padding: 2px 6px; font-weight: 700; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.3); color: #38bdf8;" title="Download Re-refined MTZ Reflection File from PDB-REDO (https://pdb-redo.eu/)">
<i class="fa-solid fa-file-arrow-down"></i> MTZ
</button>
</div>
</div>
<!-- Focal Active Target Card (Strict High-Contrast Carving Area) -->
<div class="density-focus-card" id="density-focus-info-card">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<i class="fa-solid fa-crosshairs" style="color: #38bdf8; font-size: 11px;"></i>
<span style="color: var(--text-muted); font-size: 10px;">Focus:</span>
<strong id="density-focus-target-label" style="color: #f1f5f9; font-family: var(--font-mono); font-size: 11px;">Active Atom</strong>
</div>
<span class="geom-chi-tag" id="density-focus-radius-tag" style="font-size: 9px; padding: 1px 5px; color: #38bdf8; border-color: rgba(56,189,248,0.3); white-space: nowrap;">
<i class="fa-solid fa-circle-dot"></i> r ≤ 6.5 Å
</span>
</div>
<div style="font-size: 9.5px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 4px;">
<i class="fa-solid fa-crosshairs" style="color: #38bdf8; font-size: 9px;"></i>
<span data-i18n="lbl_density_focal_note">Density carved to high-contrast focal area</span>
</div>
</div>
<!-- Density Channels Bar: 3 Independent Maps + Compact [All ON / OFF] Switch -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
<span style="font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);"><i class="fa-solid fa-layer-group"></i> <span data-i18n="lbl_channels">Channels</span></span>
<button class="chip-btn" id="btn-studio-trimap" style="font-size: 9.5px; padding: 2px 8px; border-radius: 4px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;" title="Toggle All Density Maps (2Fo-Fc, +Fo-Fc, -Fo-Fc) ON or OFF simultaneously">
<i class="fa-solid fa-sliders"></i> <span id="txt-density-all" data-i18n="txt_density_all">All ON / OFF</span>
</button>
</div>
<div style="display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 5px; margin-bottom: 8px;">
<button class="studio-pill density-chan-btn" id="btn-studio-2fofc" title="Toggle 2Fo-Fc Electron Density Map (Blue Mesh, 1.4σ, Carved to Focus)">
<i class="fa-solid fa-cube" style="color:#38bdf8; font-size: 10.5px;"></i>
<span data-i18n="btn_2fofc" style="font-weight: 600;">2Fo-Fc</span>
<span class="geom-chi-tag" id="badge-2fofc-sigma" style="margin-left:auto; font-size:8.5px; padding:0 3px;">1.4σ</span>
</button>
<button class="studio-pill density-chan-btn" id="btn-studio-fofc-pos" title="Toggle +Fo-Fc Positive Difference Map (+3.0σ Green: Missing Model Features, Carved to Focus)">
<i class="fa-solid fa-plus" style="color:#22c55e; font-size: 10.5px;"></i>
<span style="font-weight: 600;">+Fo-Fc</span>
<span class="geom-chi-tag" id="badge-fofc-pos-sigma" style="margin-left:auto; font-size:8.5px; padding:0 3px;">+3.0σ</span>
</button>
<button class="studio-pill density-chan-btn" id="btn-studio-fofc-neg" title="Toggle -Fo-Fc Negative Difference Map (-3.0σ Red: Excess Model Features, Carved to Focus)">
<i class="fa-solid fa-minus" style="color:#ef4444; font-size: 10.5px;"></i>
<span style="font-weight: 600;">-Fo-Fc</span>
<span class="geom-chi-tag" id="badge-fofc-neg-sigma" style="margin-left:auto; font-size:8.5px; padding:0 3px;">-3.0σ</span>
</button>
</div>
<!-- Map Carving Scope: Focus (6.5Å, matching contrast zone) vs Pocket (4.5Å) vs Residue (2Å) vs All Atoms -->
<div class="density-scope-row" style="margin-bottom: 9px;">
<div style="display: flex; gap: 3px; font-size: 10px;">
<button class="density-scope-btn active" id="btn-density-scope-sphere" title="Focal contrast area (CarboxMol standard: 6.5Å radius around brightened atom)" data-i18n="scope_focus">Focus (6.5Å)</button>
<button class="density-scope-btn" id="btn-density-scope-pocket" title="Focus electron density around 4.5Å carboxyl pair pocket" data-i18n="scope_pocket">Pocket (4.5Å)</button>
<button class="density-scope-btn" id="btn-density-scope-residue" title="Focus electron density tightly on active residue atoms (2.0Å radius)" data-i18n="scope_residue">Residue (2Å)</button>
<button class="density-scope-btn" id="btn-density-scope-all" title="Render electron density across all atoms" data-i18n="scope_all">All Atoms</button>
</div>
</div>
<!-- 2Fo-Fc Contour Level (Sigma) Slider & Presets -->
<div class="density-control-row" style="margin-bottom: 8px;">
<div class="density-control-label" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<span style="font-size: 10.5px; font-weight: 600; color: #cbd5e1;"><i class="fa-solid fa-cube" style="color: #38bdf8;"></i> <span data-i18n="lbl_contour_sigma">2Fo-Fc Sigma</span></span>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display: flex; gap: 2px;">
<button type="button" class="density-preset-btn" data-sigma="0.5" style="padding: 1px 4px; font-size: 8.5px;">0.5</button>
<button type="button" class="density-preset-btn" data-sigma="1.0" style="padding: 1px 4px; font-size: 8.5px;">1.0</button>
<button type="button" class="density-preset-btn active" data-sigma="1.4" style="padding: 1px 4px; font-size: 8.5px;">1.4</button>
<button type="button" class="density-preset-btn" data-sigma="2.0" style="padding: 1px 4px; font-size: 8.5px;">2.0</button>
</div>
<strong id="studio-density-sigma-val" style="color: #38bdf8; font-family: var(--font-mono); font-size: 11px;">1.4 σ</strong>
</div>
</div>
<input type="range" id="studio-density-sigma-range" min="0.2" max="4.0" step="0.1" value="1.4"
class="density-slider-studio" title="Adjust 2Fo-Fc electron density contour level in sigma units">
</div>
<!-- +Fo-Fc Positive Difference Map Sigma Slider & Presets -->
<div class="density-control-row" style="margin-bottom: 8px;">
<div class="density-control-label" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<span style="font-size: 10.5px; font-weight: 600; color: #cbd5e1;"><i class="fa-solid fa-plus" style="color: #22c55e;"></i> <span data-i18n="lbl_fofc_pos_sigma">+Fo-Fc Diff Sigma</span></span>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display: flex; gap: 2px;">
<button type="button" class="density-pos-preset-btn" data-sigma="1.5" style="padding: 1px 4px; font-size: 8.5px;">+1.5</button>
<button type="button" class="density-pos-preset-btn" data-sigma="2.5" style="padding: 1px 4px; font-size: 8.5px;">+2.5</button>
<button type="button" class="density-pos-preset-btn active" data-sigma="3.0" style="padding: 1px 4px; font-size: 8.5px;">+3.0</button>
<button type="button" class="density-pos-preset-btn" data-sigma="4.0" style="padding: 1px 4px; font-size: 8.5px;">+4.0</button>
</div>
<strong id="studio-density-fofc-pos-val" style="color: #22c55e; font-family: var(--font-mono); font-size: 11px;">+3.0 σ</strong>
</div>
</div>
<input type="range" id="studio-density-fofc-pos-range" min="1.0" max="6.0" step="0.1" value="3.0"
class="density-slider-studio pos" title="Adjust +Fo-Fc positive difference map contour level in sigma units">
</div>
<!-- -Fo-Fc Negative Difference Map Sigma Slider & Presets -->
<div class="density-control-row" style="margin-bottom: 8px;">
<div class="density-control-label" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<span style="font-size: 10.5px; font-weight: 600; color: #cbd5e1;"><i class="fa-solid fa-minus" style="color: #ef4444;"></i> <span data-i18n="lbl_fofc_neg_sigma">-Fo-Fc Diff Sigma</span></span>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display: flex; gap: 2px;">
<button type="button" class="density-neg-preset-btn" data-sigma="1.5" style="padding: 1px 4px; font-size: 8.5px;">-1.5</button>
<button type="button" class="density-neg-preset-btn" data-sigma="2.5" style="padding: 1px 4px; font-size: 8.5px;">-2.5</button>
<button type="button" class="density-neg-preset-btn active" data-sigma="3.0" style="padding: 1px 4px; font-size: 8.5px;">-3.0</button>
<button type="button" class="density-neg-preset-btn" data-sigma="4.0" style="padding: 1px 4px; font-size: 8.5px;">-4.0</button>
</div>
<strong id="studio-density-fofc-neg-val" style="color: #ef4444; font-family: var(--font-mono); font-size: 11px;">-3.0 σ</strong>
</div>
</div>
<input type="range" id="studio-density-fofc-neg-range" min="1.0" max="6.0" step="0.1" value="3.0"
class="density-slider-studio neg" title="Adjust -Fo-Fc negative difference map contour level in sigma units">
</div>
<!-- Local Map Upload, PDB-REDO MTZ, & Telemetry -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 10.5px; color: var(--text-muted); background: rgba(0,0,0,0.25); padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05);">
<div style="display: flex; gap: 4px; align-items: center;">
<label for="input-custom-map-file" class="chip-btn" style="cursor: pointer; font-size: 9.5px; padding: 2px 6px;" title="Upload local electron density map or reflection file (.ccp4, .map, .mrc, .dsn6, .mtz)">
<i class="fa-solid fa-file-arrow-up"></i> <span data-i18n="btn_custom_map">Custom Map / MTZ</span>
</label>
<a id="density-pdb-redo-entry-link" href="https://pdb-redo.eu/" target="_blank" rel="noopener noreferrer" class="chip-btn" style="text-decoration: none; font-size: 9px; padding: 2px 6px; color: #38bdf8;" title="Open active entry on PDB-REDO (https://pdb-redo.eu/)">
<i class="fa-solid fa-arrow-up-right-from-square"></i> PDB-REDO
</a>
</div>
<input type="file" id="input-custom-map-file" accept=".ccp4,.map,.dsn6,.mrc,.mtz" style="display: none;">
<span id="studio-density-status-text" data-i18n="lbl_no_map" style="font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted);">No Map Loaded</span>
</div>
<!-- 1D Density Profile Inspector Button -->
<button class="studio-pill" id="btn-studio-density-profile"
style="width: 100%; margin-top: 6px;"
title="Open 1D Electron Density Line Profile Inspector for active carboxyl pair">
<i class="fa-solid fa-chart-line" style="color: #38bdf8;"></i>
<span data-i18n="btn_1d_density">1D Density Profile</span>
<span class="section-badge" style="margin-left: auto;">Inspector</span>
</button>
</div>
</aside>
<!-- Central 3D Canvas Viewport -->
<section class="studio-viewport-center">
<!-- Welcome / Empty State Overlay -->
<div id="studio-empty-state" class="studio-empty-overlay">
<div class="empty-state-card">
<div class="empty-brand-icon">
<img src="assets/carboxmol_logo.png?v=0.4.5" alt="CarboxMol Logo" class="empty-logo-img"
onerror="this.onerror=null; this.src='assets/carboxmol_logo.png?v=0.4.5';">
</div>
<h2 class="empty-title" data-i18n="welcome_title">CarboxMol</h2>
<p class="empty-desc" data-i18n="welcome_desc">
Enterprise Macromolecular Crystallographic Workbench for Carboxyl Protonation States,
Low-Barrier Hydrogen Bonds & Microenvironments.
</p>
<!-- Central Quick Fetch Input -->
<div class="empty-fetch-row">
<div class="empty-input-wrap">
<i class="fa-solid fa-dna" style="color: var(--accent-cyan);"></i>
<input type="text" id="studio-empty-pdb-input" placeholder="Enter PDB (5GY6) or UniProt (P04637)..."
maxlength="25" data-i18n-ph="empty_input_ph">
</div>
<button class="btn-studio primary" id="btn-empty-load"
style="padding: 9px 18px; font-size: 12px; font-weight: 700;">
<i class="fa-solid fa-bolt"></i> <span data-i18n="btn_empty_fetch">Fetch Structure</span>
</button>
</div>
<!-- Drag and Drop Dropzone -->
<div class="empty-dropzone-hint" id="studio-empty-dropzone"
title="Click to browse files or drag and drop .pdb / .cif here">
<i class="fa-solid fa-cloud-arrow-up" style="color: var(--accent-cyan); font-size: 20px;"></i>
<div
style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px;">
<strong style="color: #fff; font-size: 12px;" data-i18n="drop_title">Drag & Drop .pdb /
.cif file here or Click to Browse</strong>
<span style="font-size: 11px; color: var(--text-muted);" data-i18n="drop_hint">Enter a PDB
code above or drag and drop a local <code>.pdb</code> / <code>.cif</code> file
here.</span>
</div>
<input type="file" id="studio-file-input" accept=".pdb,.cif,.mmcif,.ent,.gro,.txt"
style="display: none;">
</div>
<!-- Scientific Citation & Author Affiliations -->
<div class="empty-author-reference-card">
<div class="author-reference-header">
<i class="fa-solid fa-book-journal-whills" style="color: var(--accent-amber);"></i>
<span data-i18n="authors_title">Scientific Authors & Reference</span>
</div>
<div class="authors-grid">
<div class="author-item">
<div class="author-avatar"><i class="fa-solid fa-user-graduate"></i></div>
<div class="author-info">
<strong data-i18n="author1_name">Suleiman M Hajizadeh</strong>
<span class="author-affil" data-i18n="author1_affil1">Institute of Molecular Biology, Ministry of Science and
Education of the Republic of Azerbaijan, Baku AZ1073, Azerbaijan</span>
<span class="author-dept" data-i18n="author1_affil2">Western Caspian University, Baku AZ1001, Azerbaijan</span>
</div>
</div>
<div class="author-item">
<div class="author-avatar mrc"><i class="fa-solid fa-flask-vial"></i></div>
<div class="author-info">
<strong data-i18n="author2_name">Garib N Murshudov</strong>
<span class="author-affil" data-i18n="author2_affil1">MRC Laboratory of Molecular Biology (LMB)</span>
<span class="author-dept" data-i18n="author2_affil2">Cambridge Biomedical Campus, Cambridge, United
Kingdom</span>
</div>
</div>
</div>
<div class="reference-publication-row">
<i class="fa-solid fa-quote-left" style="color: var(--text-muted); font-size: 11px;"></i>
<span class="ref-text" data-i18n="ref_paper_title">
Structural Identification of Anomalous Carboxyl Protonation States, Low-Barrier Hydrogen Bonds, and Microenvironment Dielectric Shielding in High-Resolution Protein Crystal Structures.
</span>
</div>
</div>
</div>
</div>
<!-- 3Dmol Canvas Container -->
<div id="studio-3dmol-canvas"></div>
<!-- Viewport Top Crystallographic Quick-Bar (CarboxMol Precision Style) -->
<div class="viewport-crystal-topbar" id="studio-crystal-topbar">
<div class="crystal-topbar-left">
<select id="crystal-sel-metals" class="crystal-topbar-select" title="Metals & Coordination Sites">
<option value="">Metals (0)</option>
</select>
<select id="crystal-sel-ligands" class="crystal-topbar-select" title="Bound Ligands & Heterogens">
<option value="">Ligands (0)</option>
</select>
<select id="crystal-sel-nonstd" class="crystal-topbar-select" title="Non-Standard Residues">
<option value="">Non-std (0)</option>
</select>
<select id="crystal-sel-pairs" class="crystal-topbar-select" title="Carboxyl Pairs (LBHB)">
<option value="">Pairs (0)</option>
</select>
<select id="crystal-sel-sites" class="crystal-topbar-select" title="Active Sites">
<option value="">SITEs (0)</option>
</select>
</div>
<div class="crystal-topbar-center">
<span class="crystal-topbar-hint" id="crystal-topbar-hint" data-i18n="topbar_press_f_hint">Press H for controls HUD | Press F for 3D Zen mode</span>
</div>
<div class="crystal-topbar-right">
<span class="crystal-pdb-badge" id="crystal-topbar-pdb">--</span>
<span class="crystal-sg-badge" id="crystal-topbar-sg">--</span>
<button class="crystal-topbar-help-toggle" id="btn-toggle-studio-hud" title="Toggle Controls HUD (H)" data-i18n-title="btn_toggle_hud_title">
<kbd>H</kbd> <span data-i18n="btn_toggle_hud_txt">toggle HUD</span>
</button>
</div>
</div>
<!-- CarboxMol Crystallographic Controls HUD Overlay (Toggle with H / Shift+F) -->
<div id="studio-controls-hud" class="studio-controls-hud" style="display: none;">
<div class="studio-hud-header">
<span class="studio-hud-title"><i class="fa-solid fa-cube"></i> <span data-i18n="hud_title">CarboxMol Controls</span></span>
<button class="studio-hud-close" id="btn-close-studio-hud" title="Close (H / Esc)" aria-label="Close HUD"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="studio-hud-scroll">
<div class="studio-hud-section">
<div class="studio-hud-section-label" data-i18n="hud_mouse_label">mouse:</div>
<div class="studio-hud-line"><span class="studio-hud-k">Left</span> = <span class="studio-hud-v" data-i18n="hud_m_rot">rotate</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Middle</span> = <span class="studio-hud-v" data-i18n="hud_m_center">select and center on atom</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Middle+drag or Ctrl+Left</span> = <span class="studio-hud-v" data-i18n="hud_m_pan">pan</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Right</span> = <span class="studio-hud-v" data-i18n="hud_m_zoom">zoom</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Ctrl+Right</span> = <span class="studio-hud-v" data-i18n="hud_m_clip">clipping</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Ctrl+Shift+Right</span> = <span class="studio-hud-v" data-i18n="hud_m_roll">roll</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Wheel</span> = <span class="studio-hud-v" data-i18n="hud_m_wheel">σ level</span></div>
<div class="studio-hud-line"><span class="studio-hud-k">Shift+Wheel</span> = <span class="studio-hud-v" data-i18n="hud_m_diff_wheel">diff map σ</span></div>
</div>
<div class="studio-hud-section">
<div class="studio-hud-section-label" data-i18n="hud_keyboard_label">keyboard:</div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="M">M</button> = <span class="studio-hud-v" data-i18n="hud_k_m">mainchain style</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="S">S</button> = <span class="studio-hud-v" data-i18n="hud_k_s">sidechain style</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="L">L</button> = <span class="studio-hud-v" data-i18n="hud_k_l">ligand style</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="T">T</button> = <span class="studio-hud-v" data-i18n="hud_k_t">water style</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="C">C</button> = <span class="studio-hud-v" data-i18n="hud_k_c">coloring</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="B">B</button> = <span class="studio-hud-v" data-i18n="hud_k_b">bg color</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="E">E</button> = <span class="studio-hud-v" data-i18n="hud_k_e">toggle fog</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="Q">Q</button> = <span class="studio-hud-v" data-i18n="hud_k_q">label font</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="+">+</button> = <span class="studio-hud-v" data-i18n="hud_k_plus">sigma level up</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="-">-</button> = <span class="studio-hud-v" data-i18n="hud_k_minus">sigma level down</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="]">]</button> = <span class="studio-hud-v" data-i18n="hud_k_rbracket">larger map radius</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="[">[</button> = <span class="studio-hud-v" data-i18n="hud_k_lbracket">smaller map radius</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="D">D</button> = <span class="studio-hud-v" data-i18n="hud_k_d">narrower clip</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="F">F</button> = <span class="studio-hud-v" data-i18n="hud_k_f">toggle HUD / wider clip</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="<">Shift+,</button> = <span class="studio-hud-v" data-i18n="hud_k_clip_back">move clip back</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key=">">Shift+.</button> = <span class="studio-hud-v" data-i18n="hud_k_clip_fwd">move clip forward</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="U">U</button> = <span class="studio-hud-v" data-i18n="hud_k_u">unitcell box</span> <span id="studio-hud-unitcell-text" style="color: #64748b; font-size: 10px;"></span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="\">\</button> = <span class="studio-hud-v" data-i18n="hud_k_backslash">toggle symmetry</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="Y">Y</button> = <span class="studio-hud-v" data-i18n="hud_k_y">hydrogens</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="V">V</button> = <span class="studio-hud-v" data-i18n="hud_k_v">inactive models</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="R">R</button> = <span class="studio-hud-v" data-i18n="hud_k_r">center view</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="G">G</button> = <span class="studio-hud-v" data-i18n="hud_k_g">density histogram</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="W">W</button> = <span class="studio-hud-v" data-i18n="hud_k_w">density style</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="I">I</button> = <span class="studio-hud-v" data-i18n="hud_k_i">spin</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="K">K</button> = <span class="studio-hud-v" data-i18n="hud_k_k">rock</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="Home">Home</button> = <span class="studio-hud-v" data-i18n="hud_k_home">wider sticks</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="End">End</button> = <span class="studio-hud-v" data-i18n="hud_k_end">thinner sticks</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="P">P</button> = <span class="studio-hud-v" data-i18n="hud_k_p">nearest Cα</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="CtrlG">Ctrl+G</button> = <span class="studio-hud-v" data-i18n="hud_k_ctrlg">go to CID</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="Delete">Delete</button> = <span class="studio-hud-v" data-i18n="hud_k_del">selected atom/residue/chain</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="ShiftP">Shift+P</button> = <span class="studio-hud-v" data-i18n="hud_k_shiftp">permalink</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="Space">Space</button> = <span class="studio-hud-v" data-i18n="hud_k_space">next residue</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="ShiftSpace">Shift+Space</button> = <span class="studio-hud-v" data-i18n="hud_k_shiftspace">previous residue</span></div>
<div class="studio-hud-line"><button class="studio-hud-kbtn" data-key="ShiftF">Shift+F</button> = <span class="studio-hud-v" data-i18n="hud_k_shiftf">full screen</span></div>
</div>
</div>
<div class="studio-hud-footer">
<span class="studio-hud-brand">CarboxMol <span id="studio-hud-version">v0.4.5</span></span>
<span class="studio-hud-fps">FPS: <strong id="studio-hud-fps-val">60.0</strong></span>
</div>
</div>
<!-- 3D Coordinate Orientation Tripod (X, Y, Z Axes Widget) -->
<canvas id="studio-orientation-tripod" width="75" height="75" style="position: absolute; top: 48px; left: 12px; pointer-events: none; z-index: 14;" title="3D Coordinate Orientation"></canvas>
<!-- Floating Contour Level HUD Indicator (CarboxMol Style) -->
<div id="studio-contour-hud" class="floating-contour-hud" style="display: none;">
<i id="contour-hud-icon" class="fa-solid fa-layer-group" style="color: var(--accent-cyan);"></i>
<span id="contour-hud-text">Contour Level: 1.40 σ</span>
</div>
<!-- Floating Rotation Pivot Indicator -->
<div id="studio-pivot-floating-badge" class="floating-pivot-badge" style="display: none;">
<i class="fa-solid fa-arrows-to-dot" style="color: var(--accent-cyan);"></i>
<span id="studio-pivot-floating-text">Rotating around: Active Pair</span>
</div>
<button class="floating-dock-btn dock-left" id="btn-toggle-left-dock" title="Toggle Left Sidebar ([ or L)" aria-label="Toggle Left Panel">
<i class="fa-solid fa-chevron-left" id="icon-toggle-left"></i>
</button>
<button class="floating-dock-btn dock-right" id="btn-toggle-right-dock" title="Toggle Right Sidebar (] or R)" aria-label="Toggle Right Panel">
<i class="fa-solid fa-chevron-right" id="icon-toggle-right"></i>
</button>
<!-- ─── Viewport HUD Info Strip (bottom-left) ──────────────────────── -->
<div class="viewport-hud-strip" id="studio-viewport-hud">
<!-- PDB Target Badge -->
<div class="hud-pill hud-pill-pdb">
<i class="fa-solid fa-database" style="color:var(--accent-cyan);font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;">PDB:</span>
<strong id="studio-target-pdb" style="color:var(--accent-cyan);font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;">--</strong>
</div>
<!-- O···O Distance -->
<div class="hud-pill">
<i class="fa-solid fa-arrows-left-right" style="color:var(--accent-amber);font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;" data-i18n="ov_dist">O···O:</span>
<strong id="studio-overlay-dist" style="color:#fff;font-family:var(--font-mono);font-size:11px;">--</strong>
</div>
<!-- Verdict -->
<div class="hud-pill">
<i class="fa-solid fa-flask" style="color:var(--accent-purple);font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;" data-i18n="ov_verdict">Verdict:</span>
<strong id="studio-overlay-verdict" style="color:#fff;font-size:10.5px;">--</strong>
</div>
<!-- Closest Water -->
<div class="hud-pill">
<i class="fa-solid fa-droplet" style="color:#38bdf8;font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;" data-i18n="ov_water">Water:</span>
<strong id="studio-overlay-water" style="color:#38bdf8;font-family:var(--font-mono);font-size:11px;">--</strong>
</div>
<!-- Crystallographic Occupancy Badge (Strict occ = 1.00 Protocol) -->
<div class="hud-pill" id="studio-occupancy-hud" title="Crystallographic Occupancy (q = 1.00 strict protocol)">
<i class="fa-solid fa-certificate" style="color:var(--accent-emerald, #10b981);font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;" data-i18n="ov_occupancy">Occupancy:</span>
<strong id="studio-overlay-occupancy" style="color:var(--text-muted);font-family:var(--font-mono);font-size:11px;">--</strong>
</div>
<!-- Rotation Pivot Atom Indicator -->
<div class="hud-pill" id="studio-rotation-pivot-hud" title="Center of 3D rotation (Cursor drag rotates around this atom/residue)">
<i class="fa-solid fa-arrows-to-dot" style="color:var(--accent-cyan);font-size:10px;"></i>
<span style="color:var(--text-muted);font-size:10px;" data-i18n="lbl_pivot">Pivot:</span>
<strong id="studio-rotation-pivot-val" style="color:var(--accent-cyan);font-family:var(--font-mono);font-size:11px;" data-i18n="pivot_active_pair">Active Pair</strong>
</div>
</div>
<!-- ─── Viewport Control Toolbar (right side, vertical) ────────────── -->
<div class="viewport-ctrl-toolbar" id="studio-viewport-toolbar">
<!-- Zoom In -->
<button class="vp-ctrl-btn" id="btn-vp-zoom-in" title="Zoom In (+)" data-i18n-title="btn_zoom_in_title">
<i class="fa-solid fa-plus"></i>
</button>
<!-- Zoom Out -->
<button class="vp-ctrl-btn" id="btn-vp-zoom-out" title="Zoom Out (-)" data-i18n-title="btn_zoom_out_title">
<i class="fa-solid fa-minus"></i>
</button>
<!-- Scroll Action Mode: Density Contour Level (Carbox Precision Mode, D) vs Zoom -->
<button class="vp-ctrl-btn active" id="btn-vp-scroll-mode" title="Toggle Wheel Action: Density Contour Level (CarboxMol Mode, D) / Camera Zoom" data-i18n-title="btn_scroll_mode_title">
<i class="fa-solid fa-layer-group" style="color:var(--accent-cyan);"></i>
</button>
<!-- Divider -->
<div class="vp-ctrl-divider"></div>
<!-- Reset / Fit -->
<button class="vp-ctrl-btn" id="btn-vp-reset" title="Reset View & Fit (Space / R)" data-i18n-title="btn_reset_view_title">
<i class="fa-solid fa-arrows-to-circle"></i>
</button>
<!-- Center Rotation Pivot on Focused Atom / Pair -->
<button class="vp-ctrl-btn" id="btn-vp-center-pivot" title="Center Rotation Pivot on Active Pair or Clicked Atom (C)" data-i18n-title="btn_center_pivot_title">
<i class="fa-solid fa-arrows-to-dot" style="color:var(--accent-cyan);"></i>
</button>
<!-- Divider -->
<div class="vp-ctrl-divider"></div>
<!-- Rotate X Axis -->
<button class="vp-ctrl-btn" id="btn-vp-rot-x" title="Rotate X Axis (↑ / ↓) [Shift for reverse]" data-i18n-title="btn_rot_x_title">
<span style="font-size:10px;font-weight:700;color:#ef4444;font-family:var(--font-mono);">X</span>
</button>
<!-- Rotate Y Axis -->
<button class="vp-ctrl-btn" id="btn-vp-rot-y" title="Rotate Y Axis (← / →) [Shift for reverse]" data-i18n-title="btn_rot_y_title">
<span style="font-size:10px;font-weight:700;color:#22c55e;font-family:var(--font-mono);">Y</span>
</button>
<!-- Roll Z Axis -->
<button class="vp-ctrl-btn" id="btn-vp-rot-z" title="Roll Z Axis (Z / C or Alt+Drag) [Shift for reverse]" data-i18n-title="btn_rot_z_title">
<span style="font-size:10px;font-weight:700;color:#38bdf8;font-family:var(--font-mono);">Z</span>
</button>
<!-- Snapshot -->
<button class="vp-ctrl-btn" id="btn-vp-snapshot" title="Snapshot (P / ⌘S)" data-i18n-title="btn_vp_snapshot_title">
<i class="fa-solid fa-camera"></i>
</button>
<!-- Divider -->
<div class="vp-ctrl-divider"></div>
<!-- Toggle Help -->
<button class="vp-ctrl-btn vp-ctrl-help-btn" id="btn-vp-help" title="Mouse & Keyboard Help (? / H)" data-i18n-title="btn_vp_help_title">
<i class="fa-solid fa-circle-question"></i>
</button>
</div>
<!-- ─── Mouse / Keyboard Help Overlay ─────────────────────────────── -->
<div class="vp-help-overlay" id="studio-vp-help" style="display:none;">
<div class="vp-help-header">
<span><i class="fa-solid fa-computer-mouse" style="color:var(--accent-cyan);"></i> <span data-i18n="help_controls_title">Controls</span></span>
<button class="vp-help-close" id="btn-vp-help-close" title="Close (H)"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="vp-help-body">
<div class="vp-help-section-title" data-i18n="help_mouse_title">Mouse & Gestures</div>
<div class="vp-help-row">
<div class="vp-help-key"><i class="fa-solid fa-computer-mouse"></i> <span data-i18n="help_left_click_key">Left Click</span></div>
<div class="vp-help-desc" data-i18n="help_left_click_desc">Lock 3-axis rotation pivot (X, Y, Z) to atom</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><i class="fa-solid fa-computer-mouse"></i> <span data-i18n="help_left_drag_key">Left Drag</span></div>
<div class="vp-help-desc" data-i18n="help_left_drag_desc">Rotate around X & Y axes through focal atom</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>Alt</kbd> + <span data-i18n="help_alt_drag_key">Left Drag / Ring</span></div>
<div class="vp-help-desc" data-i18n="help_alt_drag_desc">Roll around Z axis through focal atom</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><i class="fa-solid fa-computer-mouse"></i> <span data-i18n="help_right_drag_key">Right Drag</span></div>
<div class="vp-help-desc" data-i18n="help_right_drag_desc">Translate / Pan view</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><i class="fa-solid fa-computer-mouse"></i> <span data-i18n="help_scroll_key">Scroll Wheel</span></div>
<div class="vp-help-desc" data-i18n="help_scroll_desc">Adjust density contour (σ) in Carbox Precision Mode, or Camera Zoom</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>Alt</kbd> / <kbd>Ctrl</kbd> + <span data-i18n="help_alt_scroll_key">Scroll</span></div>
<div class="vp-help-desc" data-i18n="help_alt_scroll_desc">Adjust density contour level (σ) in any mode</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>D</kbd></div>
<div class="vp-help-desc" data-i18n="help_toggle_scroll_desc">Toggle Scroll Mode: Density Contour (σ) vs Camera Zoom</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>Shift</kbd> + <span data-i18n="help_shift_scroll_key">Scroll</span></div>
<div class="vp-help-desc" data-i18n="help_shift_scroll_desc">Adjust slab depth slice (clip plane)</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><i class="fa-solid fa-computer-mouse"></i> <span data-i18n="help_dbl_click_key">Dbl-Click</span></div>
<div class="vp-help-desc" data-i18n="help_dbl_click_desc">Center camera on atom</div>
</div>
<div class="vp-help-section-title" style="margin-top:10px;" data-i18n="help_kbd_title">Keyboard & Toolbar</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>←</kbd> <kbd>→</kbd> <kbd>↑</kbd> <kbd>↓</kbd></div>
<div class="vp-help-desc" data-i18n="help_rot_xy_desc">Rotate around X and Y axes</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>Z</kbd> / <kbd>C</kbd></div>
<div class="vp-help-desc" data-i18n="help_roll_z_desc">Roll around Z axis (CCW / CW)</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>X</kbd>, <kbd>Y</kbd>, <kbd>Z</kbd> Buttons</div>
<div class="vp-help-desc" data-i18n="help_rot_btn_desc">Toolbar 15° rotation steps</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>[</kbd> / <kbd>L</kbd></div>
<div class="vp-help-desc" data-i18n="help_sidebar_l_desc">Toggle Left Sidebar</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>]</kbd> / <kbd>R</kbd></div>
<div class="vp-help-desc" data-i18n="help_sidebar_r_desc">Toggle Right Sidebar</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>S</kbd></div>
<div class="vp-help-desc" data-i18n="help_seq_desc">Toggle Sequence Bar</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>F</kbd></div>
<div class="vp-help-desc" data-i18n="help_zen_desc">Toggle Zen Fullscreen</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>Space</kbd> / <kbd>C</kbd></div>
<div class="vp-help-desc" data-i18n="help_center_pair_desc">Center on active pair</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>1</kbd>–<kbd>5</kbd></div>
<div class="vp-help-desc" data-i18n="help_switch_state_desc">Switch proton state</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>←</kbd> / <kbd>→</kbd></div>
<div class="vp-help-desc" data-i18n="help_nav_pairs_desc">Navigate carboxyl pairs</div>
</div>
<div class="vp-help-row">
<div class="vp-help-key"><kbd>?</kbd> / <kbd>H</kbd></div>
<div class="vp-help-desc" data-i18n="help_all_shortcuts_desc">All shortcuts cheat-sheet</div>
</div>
</div>
</div>
<!-- Atom Pick Status Badge (top-right, shown during measurement) -->
<div class="hud-pick-badge" id="studio-overlay-picked-box" style="display:none;">
<i class="fa-solid fa-crosshairs" style="color:var(--accent-amber);font-size:10px;"></i>
<span id="studio-overlay-picked-val" style="font-size:11px;"></span>
</div>
</section>
<!-- Right Tool & Measurement Panel -->