@jjlmoya/utils-science 1.17.0 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,217 @@
1
+ :root {
2
+ --sim-primary: #06c;
3
+ --sim-secondary: #60c;
4
+ --sim-accent: #2c0;
5
+ --sim-text: #0f172a;
6
+ --sim-text-muted: #475569;
7
+ --sim-bg: #fff;
8
+ --sim-bg-secondary: #f8fafc;
9
+ --sim-bg-tertiary: #f1f5f9;
10
+ --sim-border: #e2e8f0;
11
+ --sim-glow-primary: rgba(0, 102, 204, 0.3);
12
+ --sim-glow-accent: rgba(34, 204, 0, 0.3);
13
+ }
14
+
15
+ .theme-dark {
16
+ --sim-primary: #00f2ff;
17
+ --sim-secondary: #7000ff;
18
+ --sim-accent: #39ff14;
19
+ --sim-text: #fff;
20
+ --sim-text-muted: #a0aec0;
21
+ --sim-bg: #12141d;
22
+ --sim-bg-secondary: #1c1f2e;
23
+ --sim-bg-tertiary: #0a0b10;
24
+ --sim-border: #2d3748;
25
+ --sim-glow-primary: rgba(0, 242, 255, 0.5);
26
+ --sim-glow-accent: rgba(57, 255, 20, 0.4);
27
+ }
28
+
29
+ .simulation-app {
30
+ padding: 0;
31
+ border-radius: 28px;
32
+ background: var(--sim-bg);
33
+ border: 1px solid var(--sim-border);
34
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
35
+ overflow: hidden;
36
+ max-width: 850px;
37
+ }
38
+
39
+ .simulation-header {
40
+ padding: 2.5rem;
41
+ background: linear-gradient(135deg, var(--sim-bg-secondary) 0%, var(--sim-bg) 100%);
42
+ border-bottom: 2px solid var(--sim-border);
43
+ text-align: center;
44
+ }
45
+
46
+ .simulation-header h2 {
47
+ font-size: 1.5rem;
48
+ margin: 0;
49
+ color: var(--sim-primary);
50
+ text-transform: uppercase;
51
+ letter-spacing: 2px;
52
+ }
53
+
54
+ .simulation-main {
55
+ padding: 2.5rem;
56
+ display: grid;
57
+ grid-template-columns: 1fr;
58
+ gap: 2.5rem;
59
+ }
60
+
61
+ .parameter-card {
62
+ background: var(--sim-bg-secondary);
63
+ padding: 1.5rem;
64
+ border-radius: 20px;
65
+ border: 1px solid var(--sim-border);
66
+ transition: transform 0.2s ease, border-color 0.2s ease;
67
+ }
68
+
69
+ .parameter-card:focus-within {
70
+ border-color: var(--sim-primary);
71
+ transform: translateY(-2px);
72
+ }
73
+
74
+ .label-row {
75
+ display: flex;
76
+ justify-content: space-between;
77
+ align-items: center;
78
+ margin-bottom: 1.5rem;
79
+ }
80
+
81
+ .label-info {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 0.75rem;
85
+ }
86
+
87
+ .label-info label {
88
+ font-weight: 700;
89
+ font-size: 1.1rem;
90
+ color: var(--sim-text);
91
+ }
92
+
93
+ .helper-text {
94
+ font-size: 0.85rem;
95
+ color: var(--sim-text-muted);
96
+ margin-bottom: 1.5rem;
97
+ display: block;
98
+ line-height: 1.6;
99
+ }
100
+
101
+ .control-row {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 1.5rem;
105
+ }
106
+
107
+ .slider-container {
108
+ flex: 1;
109
+ }
110
+
111
+ input[type="range"] {
112
+ -webkit-appearance: none;
113
+ appearance: none;
114
+ width: 100%;
115
+ height: 12px;
116
+ background: var(--sim-bg-tertiary);
117
+ border-radius: 10px;
118
+ outline: none;
119
+ border: 1px solid var(--sim-border);
120
+ }
121
+
122
+ input[type="range"]::-webkit-slider-thumb {
123
+ -webkit-appearance: none;
124
+ width: 28px;
125
+ height: 28px;
126
+ background: var(--sim-primary);
127
+ border: 4px solid var(--sim-bg-secondary);
128
+ border-radius: 50%;
129
+ cursor: pointer;
130
+ box-shadow: 0 0 15px var(--sim-glow-primary);
131
+ }
132
+
133
+ input[type="range"]::-moz-range-thumb {
134
+ width: 28px;
135
+ height: 28px;
136
+ background: var(--sim-primary);
137
+ border: 4px solid var(--sim-bg-secondary);
138
+ border-radius: 50%;
139
+ cursor: pointer;
140
+ box-shadow: 0 0 15px var(--sim-glow-primary);
141
+ }
142
+
143
+ .value-display {
144
+ background: var(--sim-bg-tertiary);
145
+ border: 1px solid var(--sim-primary);
146
+ color: var(--sim-primary);
147
+ padding: 0.5rem 1rem;
148
+ border-radius: 12px;
149
+ font-size: 1.25rem;
150
+ font-weight: 700;
151
+ min-width: 80px;
152
+ text-align: center;
153
+ }
154
+
155
+ .results-section {
156
+ padding: 3rem;
157
+ background: var(--sim-bg-tertiary);
158
+ border-top: 2px solid var(--sim-border);
159
+ text-align: center;
160
+ }
161
+
162
+ .probability-ring {
163
+ position: relative;
164
+ display: inline-flex;
165
+ justify-content: center;
166
+ align-items: center;
167
+ margin-bottom: 2rem;
168
+ }
169
+
170
+ .probability-number {
171
+ font-size: 5rem;
172
+ font-weight: 950;
173
+ color: var(--sim-accent);
174
+ text-shadow: 0 0 30px var(--sim-glow-accent);
175
+ line-height: 1;
176
+ }
177
+
178
+ .verdict-box {
179
+ max-width: 500px;
180
+ margin: 0 auto;
181
+ }
182
+
183
+ .verdict-title {
184
+ color: var(--sim-text);
185
+ font-size: 1.25rem;
186
+ font-weight: 800;
187
+ margin-bottom: 1rem;
188
+ text-transform: uppercase;
189
+ }
190
+
191
+ .verdict-detail {
192
+ color: var(--sim-text-muted);
193
+ font-size: 1rem;
194
+ line-height: 1.6;
195
+ }
196
+
197
+ @media (max-width: 640px) {
198
+ .simulation-main,
199
+ .results-section {
200
+ padding: 1.5rem;
201
+ }
202
+
203
+ .probability-number {
204
+ font-size: 3.5rem;
205
+ }
206
+
207
+ .simulation-app {
208
+ border-radius: 16px;
209
+ }
210
+ }
211
+
212
+ @media (min-width: 1025px) {
213
+ .simulation-app {
214
+ max-width: 700px;
215
+ margin: 0 auto;
216
+ }
217
+ }