Hugging Face's logo

Spaces:
alexdatamed
/
Lecture2_DSW
Running

App Files Community
alexdatamed commited on
Commit
2ad051c
·
verified ·
1 Parent(s): 574e9f7

Upload style.css

Browse files
Files changed (1) hide show
  1. style.css +1624 -15
style.css CHANGED
@@ -1,28 +1,1637 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ :root {
3
+ /* Colors */
4
+ --color-background: rgba(252, 252, 249, 1);
5
+ --color-surface: rgba(255, 255, 253, 1);
6
+ --color-text: rgba(19, 52, 59, 1);
7
+ --color-text-secondary: rgba(98, 108, 113, 1);
8
+ --color-primary: rgba(33, 128, 141, 1);
9
+ --color-primary-hover: rgba(29, 116, 128, 1);
10
+ --color-primary-active: rgba(26, 104, 115, 1);
11
+ --color-secondary: rgba(94, 82, 64, 0.12);
12
+ --color-secondary-hover: rgba(94, 82, 64, 0.2);
13
+ --color-secondary-active: rgba(94, 82, 64, 0.25);
14
+ --color-border: rgba(94, 82, 64, 0.2);
15
+ --color-btn-primary-text: rgba(252, 252, 249, 1);
16
+ --color-card-border: rgba(94, 82, 64, 0.12);
17
+ --color-card-border-inner: rgba(94, 82, 64, 0.12);
18
+ --color-error: rgba(192, 21, 47, 1);
19
+ --color-success: rgba(33, 128, 141, 1);
20
+ --color-warning: rgba(168, 75, 47, 1);
21
+ --color-info: rgba(98, 108, 113, 1);
22
+ --color-focus-ring: rgba(33, 128, 141, 0.4);
23
+ --color-select-caret: rgba(19, 52, 59, 0.8);
24
+
25
+ /* Common style patterns */
26
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
27
+ --focus-outline: 2px solid var(--color-primary);
28
+ --status-bg-opacity: 0.15;
29
+ --status-border-opacity: 0.25;
30
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
31
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
32
+
33
+ /* RGB versions for opacity control */
34
+ --color-success-rgb: 33, 128, 141;
35
+ --color-error-rgb: 192, 21, 47;
36
+ --color-warning-rgb: 168, 75, 47;
37
+ --color-info-rgb: 98, 108, 113;
38
+
39
+ /* Typography */
40
+ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
41
+ BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
42
+ --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
43
+ Monaco, Consolas, monospace;
44
+ --font-size-xs: 11px;
45
+ --font-size-sm: 12px;
46
+ --font-size-base: 14px;
47
+ --font-size-md: 14px;
48
+ --font-size-lg: 16px;
49
+ --font-size-xl: 18px;
50
+ --font-size-2xl: 20px;
51
+ --font-size-3xl: 24px;
52
+ --font-size-4xl: 30px;
53
+ --font-weight-normal: 400;
54
+ --font-weight-medium: 500;
55
+ --font-weight-semibold: 550;
56
+ --font-weight-bold: 600;
57
+ --line-height-tight: 1.2;
58
+ --line-height-normal: 1.5;
59
+ --letter-spacing-tight: -0.01em;
60
+
61
+ /* Spacing */
62
+ --space-0: 0;
63
+ --space-1: 1px;
64
+ --space-2: 2px;
65
+ --space-4: 4px;
66
+ --space-6: 6px;
67
+ --space-8: 8px;
68
+ --space-10: 10px;
69
+ --space-12: 12px;
70
+ --space-16: 16px;
71
+ --space-20: 20px;
72
+ --space-24: 24px;
73
+ --space-32: 32px;
74
+
75
+ /* Border Radius */
76
+ --radius-sm: 6px;
77
+ --radius-base: 8px;
78
+ --radius-md: 10px;
79
+ --radius-lg: 12px;
80
+ --radius-full: 9999px;
81
+
82
+ /* Shadows */
83
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
84
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
85
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
86
+ 0 2px 4px -1px rgba(0, 0, 0, 0.02);
87
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
88
+ 0 4px 6px -2px rgba(0, 0, 0, 0.02);
89
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
90
+ inset 0 -1px 0 rgba(0, 0, 0, 0.03);
91
+
92
+ /* Animation */
93
+ --duration-fast: 150ms;
94
+ --duration-normal: 250ms;
95
+ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
96
+
97
+ /* Layout */
98
+ --container-sm: 640px;
99
+ --container-md: 768px;
100
+ --container-lg: 1024px;
101
+ --container-xl: 1280px;
102
+ }
103
+
104
+ /* Dark mode colors */
105
+ @media (prefers-color-scheme: dark) {
106
+ :root {
107
+ --color-background: rgba(31, 33, 33, 1);
108
+ --color-surface: rgba(38, 40, 40, 1);
109
+ --color-text: rgba(245, 245, 245, 1);
110
+ --color-text-secondary: rgba(167, 169, 169, 0.7);
111
+ --color-primary: rgba(50, 184, 198, 1);
112
+ --color-primary-hover: rgba(45, 166, 178, 1);
113
+ --color-primary-active: rgba(41, 150, 161, 1);
114
+ --color-secondary: rgba(119, 124, 124, 0.15);
115
+ --color-secondary-hover: rgba(119, 124, 124, 0.25);
116
+ --color-secondary-active: rgba(119, 124, 124, 0.3);
117
+ --color-border: rgba(119, 124, 124, 0.3);
118
+ --color-error: rgba(255, 84, 89, 1);
119
+ --color-success: rgba(50, 184, 198, 1);
120
+ --color-warning: rgba(230, 129, 97, 1);
121
+ --color-info: rgba(167, 169, 169, 1);
122
+ --color-focus-ring: rgba(50, 184, 198, 0.4);
123
+ --color-btn-primary-text: rgba(19, 52, 59, 1);
124
+ --color-card-border: rgba(119, 124, 124, 0.2);
125
+ --color-card-border-inner: rgba(119, 124, 124, 0.15);
126
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
127
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
128
+ --button-border-secondary: rgba(119, 124, 124, 0.2);
129
+ --color-border-secondary: rgba(119, 124, 124, 0.2);
130
+ --color-select-caret: rgba(245, 245, 245, 0.8);
131
+
132
+ /* Common style patterns - updated for dark mode */
133
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
134
+ --focus-outline: 2px solid var(--color-primary);
135
+ --status-bg-opacity: 0.15;
136
+ --status-border-opacity: 0.25;
137
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
138
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
139
+
140
+ /* RGB versions for dark mode */
141
+ --color-success-rgb: 50, 184, 198;
142
+ --color-error-rgb: 255, 84, 89;
143
+ --color-warning-rgb: 230, 129, 97;
144
+ --color-info-rgb: 167, 169, 169;
145
+ }
146
+ }
147
+
148
+ /* Data attribute for manual theme switching */
149
+ [data-color-scheme="dark"] {
150
+ --color-background: rgba(31, 33, 33, 1);
151
+ --color-surface: rgba(38, 40, 40, 1);
152
+ --color-text: rgba(245, 245, 245, 1);
153
+ --color-text-secondary: rgba(167, 169, 169, 0.7);
154
+ --color-primary: rgba(50, 184, 198, 1);
155
+ --color-primary-hover: rgba(45, 166, 178, 1);
156
+ --color-primary-active: rgba(41, 150, 161, 1);
157
+ --color-secondary: rgba(119, 124, 124, 0.15);
158
+ --color-secondary-hover: rgba(119, 124, 124, 0.25);
159
+ --color-secondary-active: rgba(119, 124, 124, 0.3);
160
+ --color-border: rgba(119, 124, 124, 0.3);
161
+ --color-error: rgba(255, 84, 89, 1);
162
+ --color-success: rgba(50, 184, 198, 1);
163
+ --color-warning: rgba(230, 129, 97, 1);
164
+ --color-info: rgba(167, 169, 169, 1);
165
+ --color-focus-ring: rgba(50, 184, 198, 0.4);
166
+ --color-btn-primary-text: rgba(19, 52, 59, 1);
167
+ --color-card-border: rgba(119, 124, 124, 0.15);
168
+ --color-card-border-inner: rgba(119, 124, 124, 0.15);
169
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
170
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
171
+ --color-border-secondary: rgba(119, 124, 124, 0.2);
172
+ --color-select-caret: rgba(245, 245, 245, 0.8);
173
+
174
+ /* Common style patterns - updated for dark mode */
175
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
176
+ --focus-outline: 2px solid var(--color-primary);
177
+ --status-bg-opacity: 0.15;
178
+ --status-border-opacity: 0.25;
179
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
180
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
181
+
182
+ /* RGB versions for dark mode */
183
+ --color-success-rgb: 50, 184, 198;
184
+ --color-error-rgb: 255, 84, 89;
185
+ --color-warning-rgb: 230, 129, 97;
186
+ --color-info-rgb: 167, 169, 169;
187
+ }
188
+
189
+ [data-color-scheme="light"] {
190
+ --color-background: rgba(252, 252, 249, 1);
191
+ --color-surface: rgba(255, 255, 253, 1);
192
+ --color-text: rgba(19, 52, 59, 1);
193
+ --color-text-secondary: rgba(98, 108, 113, 1);
194
+ --color-primary: rgba(33, 128, 141, 1);
195
+ --color-primary-hover: rgba(29, 116, 128, 1);
196
+ --color-primary-active: rgba(26, 104, 115, 1);
197
+ --color-secondary: rgba(94, 82, 64, 0.12);
198
+ --color-secondary-hover: rgba(94, 82, 64, 0.2);
199
+ --color-secondary-active: rgba(94, 82, 64, 0.25);
200
+ --color-border: rgba(94, 82, 64, 0.2);
201
+ --color-btn-primary-text: rgba(252, 252, 249, 1);
202
+ --color-card-border: rgba(94, 82, 64, 0.12);
203
+ --color-card-border-inner: rgba(94, 82, 64, 0.12);
204
+ --color-error: rgba(192, 21, 47, 1);
205
+ --color-success: rgba(33, 128, 141, 1);
206
+ --color-warning: rgba(168, 75, 47, 1);
207
+ --color-info: rgba(98, 108, 113, 1);
208
+ --color-focus-ring: rgba(33, 128, 141, 0.4);
209
+
210
+ /* RGB versions for light mode */
211
+ --color-success-rgb: 33, 128, 141;
212
+ --color-error-rgb: 192, 21, 47;
213
+ --color-warning-rgb: 168, 75, 47;
214
+ --color-info-rgb: 98, 108, 113;
215
+ }
216
+
217
+ /* Base styles */
218
+ html {
219
+ font-size: var(--font-size-base);
220
+ font-family: var(--font-family-base);
221
+ line-height: var(--line-height-normal);
222
+ color: var(--color-text);
223
+ background-color: var(--color-background);
224
+ -webkit-font-smoothing: antialiased;
225
+ box-sizing: border-box;
226
+ }
227
+
228
  body {
229
+ margin: 0;
230
+ padding: 0;
231
+ }
232
+
233
+ *,
234
+ *::before,
235
+ *::after {
236
+ box-sizing: inherit;
237
+ }
238
+
239
+ /* Typography */
240
+ h1,
241
+ h2,
242
+ h3,
243
+ h4,
244
+ h5,
245
+ h6 {
246
+ margin: 0;
247
+ font-weight: var(--font-weight-semibold);
248
+ line-height: var(--line-height-tight);
249
+ color: var(--color-text);
250
+ letter-spacing: var(--letter-spacing-tight);
251
  }
252
 
253
  h1 {
254
+ font-size: var(--font-size-4xl);
255
+ }
256
+ h2 {
257
+ font-size: var(--font-size-3xl);
258
+ }
259
+ h3 {
260
+ font-size: var(--font-size-2xl);
261
+ }
262
+ h4 {
263
+ font-size: var(--font-size-xl);
264
+ }
265
+ h5 {
266
+ font-size: var(--font-size-lg);
267
+ }
268
+ h6 {
269
+ font-size: var(--font-size-md);
270
  }
271
 
272
  p {
273
+ margin: 0 0 var(--space-16) 0;
274
+ }
275
+
276
+ a {
277
+ color: var(--color-primary);
278
+ text-decoration: none;
279
+ transition: color var(--duration-fast) var(--ease-standard);
280
+ }
281
+
282
+ a:hover {
283
+ color: var(--color-primary-hover);
284
+ }
285
+
286
+ code,
287
+ pre {
288
+ font-family: var(--font-family-mono);
289
+ font-size: calc(var(--font-size-base) * 0.95);
290
+ background-color: var(--color-secondary);
291
+ border-radius: var(--radius-sm);
292
+ }
293
+
294
+ code {
295
+ padding: var(--space-1) var(--space-4);
296
+ }
297
+
298
+ pre {
299
+ padding: var(--space-16);
300
+ margin: var(--space-16) 0;
301
+ overflow: auto;
302
+ border: 1px solid var(--color-border);
303
+ }
304
+
305
+ pre code {
306
+ background: none;
307
+ padding: 0;
308
+ }
309
+
310
+ /* Buttons */
311
+ .btn {
312
+ display: inline-flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ padding: var(--space-8) var(--space-16);
316
+ border-radius: var(--radius-base);
317
+ font-size: var(--font-size-base);
318
+ font-weight: 500;
319
+ line-height: 1.5;
320
+ cursor: pointer;
321
+ transition: all var(--duration-normal) var(--ease-standard);
322
+ border: none;
323
+ text-decoration: none;
324
+ position: relative;
325
+ }
326
+
327
+ .btn:focus-visible {
328
+ outline: none;
329
+ box-shadow: var(--focus-ring);
330
  }
331
 
332
+ .btn--primary {
333
+ background: var(--color-primary);
334
+ color: var(--color-btn-primary-text);
335
+ }
336
+
337
+ .btn--primary:hover {
338
+ background: var(--color-primary-hover);
339
+ }
340
+
341
+ .btn--primary:active {
342
+ background: var(--color-primary-active);
343
+ }
344
+
345
+ .btn--secondary {
346
+ background: var(--color-secondary);
347
+ color: var(--color-text);
348
+ }
349
+
350
+ .btn--secondary:hover {
351
+ background: var(--color-secondary-hover);
352
+ }
353
+
354
+ .btn--secondary:active {
355
+ background: var(--color-secondary-active);
356
+ }
357
+
358
+ .btn--outline {
359
+ background: transparent;
360
+ border: 1px solid var(--color-border);
361
+ color: var(--color-text);
362
+ }
363
+
364
+ .btn--outline:hover {
365
+ background: var(--color-secondary);
366
+ }
367
+
368
+ .btn--sm {
369
+ padding: var(--space-4) var(--space-12);
370
+ font-size: var(--font-size-sm);
371
+ border-radius: var(--radius-sm);
372
+ }
373
+
374
+ .btn--lg {
375
+ padding: var(--space-10) var(--space-20);
376
+ font-size: var(--font-size-lg);
377
+ border-radius: var(--radius-md);
378
+ }
379
+
380
+ .btn--full-width {
381
+ width: 100%;
382
+ }
383
+
384
+ .btn:disabled {
385
+ opacity: 0.5;
386
+ cursor: not-allowed;
387
+ }
388
+
389
+ /* Form elements */
390
+ .form-control {
391
+ display: block;
392
+ width: 100%;
393
+ padding: var(--space-8) var(--space-12);
394
+ font-size: var(--font-size-md);
395
+ line-height: 1.5;
396
+ color: var(--color-text);
397
+ background-color: var(--color-surface);
398
+ border: 1px solid var(--color-border);
399
+ border-radius: var(--radius-base);
400
+ transition: border-color var(--duration-fast) var(--ease-standard),
401
+ box-shadow var(--duration-fast) var(--ease-standard);
402
+ }
403
+
404
+ textarea.form-control {
405
+ font-family: var(--font-family-base);
406
+ font-size: var(--font-size-base);
407
+ }
408
+
409
+ select.form-control {
410
+ padding: var(--space-8) var(--space-12);
411
+ -webkit-appearance: none;
412
+ -moz-appearance: none;
413
+ appearance: none;
414
+ background-image: var(--select-caret-light);
415
+ background-repeat: no-repeat;
416
+ background-position: right var(--space-12) center;
417
+ background-size: 16px;
418
+ padding-right: var(--space-32);
419
+ }
420
+
421
+ /* Add a dark mode specific caret */
422
+ @media (prefers-color-scheme: dark) {
423
+ select.form-control {
424
+ background-image: var(--select-caret-dark);
425
+ }
426
+ }
427
+
428
+ /* Also handle data-color-scheme */
429
+ [data-color-scheme="dark"] select.form-control {
430
+ background-image: var(--select-caret-dark);
431
+ }
432
+
433
+ [data-color-scheme="light"] select.form-control {
434
+ background-image: var(--select-caret-light);
435
+ }
436
+
437
+ .form-control:focus {
438
+ border-color: var(--color-primary);
439
+ outline: var(--focus-outline);
440
+ }
441
+
442
+ .form-label {
443
+ display: block;
444
+ margin-bottom: var(--space-8);
445
+ font-weight: var(--font-weight-medium);
446
+ font-size: var(--font-size-sm);
447
+ }
448
+
449
+ .form-group {
450
+ margin-bottom: var(--space-16);
451
+ }
452
+
453
+ /* Card component */
454
  .card {
455
+ background-color: var(--color-surface);
456
+ border-radius: var(--radius-lg);
457
+ border: 1px solid var(--color-card-border);
458
+ box-shadow: var(--shadow-sm);
459
+ overflow: hidden;
460
+ transition: box-shadow var(--duration-normal) var(--ease-standard);
461
+ }
462
+
463
+ .card:hover {
464
+ box-shadow: var(--shadow-md);
465
+ }
466
+
467
+ .card__body {
468
+ padding: var(--space-16);
469
+ }
470
+
471
+ .card__header,
472
+ .card__footer {
473
+ padding: var(--space-16);
474
+ border-bottom: 1px solid var(--color-card-border-inner);
475
+ }
476
+
477
+ /* Status indicators - simplified with CSS variables */
478
+ .status {
479
+ display: inline-flex;
480
+ align-items: center;
481
+ padding: var(--space-6) var(--space-12);
482
+ border-radius: var(--radius-full);
483
+ font-weight: var(--font-weight-medium);
484
+ font-size: var(--font-size-sm);
485
+ }
486
+
487
+ .status--success {
488
+ background-color: rgba(
489
+ var(--color-success-rgb, 33, 128, 141),
490
+ var(--status-bg-opacity)
491
+ );
492
+ color: var(--color-success);
493
+ border: 1px solid
494
+ rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
495
+ }
496
+
497
+ .status--error {
498
+ background-color: rgba(
499
+ var(--color-error-rgb, 192, 21, 47),
500
+ var(--status-bg-opacity)
501
+ );
502
+ color: var(--color-error);
503
+ border: 1px solid
504
+ rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
505
+ }
506
+
507
+ .status--warning {
508
+ background-color: rgba(
509
+ var(--color-warning-rgb, 168, 75, 47),
510
+ var(--status-bg-opacity)
511
+ );
512
+ color: var(--color-warning);
513
+ border: 1px solid
514
+ rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
515
+ }
516
+
517
+ .status--info {
518
+ background-color: rgba(
519
+ var(--color-info-rgb, 98, 108, 113),
520
+ var(--status-bg-opacity)
521
+ );
522
+ color: var(--color-info);
523
+ border: 1px solid
524
+ rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
525
+ }
526
+
527
+ /* Container layout */
528
+ .container {
529
+ width: 100%;
530
+ margin-right: auto;
531
+ margin-left: auto;
532
+ padding-right: var(--space-16);
533
+ padding-left: var(--space-16);
534
+ }
535
+
536
+ @media (min-width: 640px) {
537
+ .container {
538
+ max-width: var(--container-sm);
539
+ }
540
+ }
541
+ @media (min-width: 768px) {
542
+ .container {
543
+ max-width: var(--container-md);
544
+ }
545
+ }
546
+ @media (min-width: 1024px) {
547
+ .container {
548
+ max-width: var(--container-lg);
549
+ }
550
+ }
551
+ @media (min-width: 1280px) {
552
+ .container {
553
+ max-width: var(--container-xl);
554
+ }
555
+ }
556
+
557
+ /* Utility classes */
558
+ .flex {
559
+ display: flex;
560
+ }
561
+ .flex-col {
562
+ flex-direction: column;
563
+ }
564
+ .items-center {
565
+ align-items: center;
566
+ }
567
+ .justify-center {
568
+ justify-content: center;
569
+ }
570
+ .justify-between {
571
+ justify-content: space-between;
572
+ }
573
+ .gap-4 {
574
+ gap: var(--space-4);
575
+ }
576
+ .gap-8 {
577
+ gap: var(--space-8);
578
+ }
579
+ .gap-16 {
580
+ gap: var(--space-16);
581
+ }
582
+
583
+ .m-0 {
584
+ margin: 0;
585
+ }
586
+ .mt-8 {
587
+ margin-top: var(--space-8);
588
+ }
589
+ .mb-8 {
590
+ margin-bottom: var(--space-8);
591
+ }
592
+ .mx-8 {
593
+ margin-left: var(--space-8);
594
+ margin-right: var(--space-8);
595
+ }
596
+ .my-8 {
597
+ margin-top: var(--space-8);
598
+ margin-bottom: var(--space-8);
599
+ }
600
+
601
+ .p-0 {
602
+ padding: 0;
603
+ }
604
+ .py-8 {
605
+ padding-top: var(--space-8);
606
+ padding-bottom: var(--space-8);
607
+ }
608
+ .px-8 {
609
+ padding-left: var(--space-8);
610
+ padding-right: var(--space-8);
611
+ }
612
+ .py-16 {
613
+ padding-top: var(--space-16);
614
+ padding-bottom: var(--space-16);
615
+ }
616
+ .px-16 {
617
+ padding-left: var(--space-16);
618
+ padding-right: var(--space-16);
619
+ }
620
+
621
+ .block {
622
+ display: block;
623
+ }
624
+ .hidden {
625
+ display: none;
626
+ }
627
+
628
+ /* Accessibility */
629
+ .sr-only {
630
+ position: absolute;
631
+ width: 1px;
632
+ height: 1px;
633
+ padding: 0;
634
+ margin: -1px;
635
+ overflow: hidden;
636
+ clip: rect(0, 0, 0, 0);
637
+ white-space: nowrap;
638
+ border-width: 0;
639
+ }
640
+
641
+ :focus-visible {
642
+ outline: var(--focus-outline);
643
+ outline-offset: 2px;
644
+ }
645
+
646
+ /* Dark mode specifics */
647
+ [data-color-scheme="dark"] .btn--outline {
648
+ border: 1px solid var(--color-border-secondary);
649
+ }
650
+
651
+ @font-face {
652
+ font-family: 'FKGroteskNeue';
653
+ src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
654
+ format('woff2');
655
+ }
656
+
657
+ :root {
658
+ /* Colors */
659
+ --color-background: rgba(252, 252, 249, 1);
660
+ --color-surface: rgba(255, 255, 253, 1);
661
+ --color-text: rgba(19, 52, 59, 1);
662
+ --color-text-secondary: rgba(98, 108, 113, 1);
663
+ --color-primary: rgba(33, 128, 141, 1);
664
+ --color-primary-hover: rgba(29, 116, 128, 1);
665
+ --color-primary-active: rgba(26, 104, 115, 1);
666
+ --color-secondary: rgba(94, 82, 64, 0.12);
667
+ --color-secondary-hover: rgba(94, 82, 64, 0.2);
668
+ --color-secondary-active: rgba(94, 82, 64, 0.25);
669
+ --color-border: rgba(94, 82, 64, 0.2);
670
+ --color-btn-primary-text: rgba(252, 252, 249, 1);
671
+ --color-card-border: rgba(94, 82, 64, 0.12);
672
+ --color-card-border-inner: rgba(94, 82, 64, 0.12);
673
+ --color-error: rgba(192, 21, 47, 1);
674
+ --color-success: rgba(33, 128, 141, 1);
675
+ --color-warning: rgba(168, 75, 47, 1);
676
+ --color-info: rgba(98, 108, 113, 1);
677
+ --color-focus-ring: rgba(33, 128, 141, 0.4);
678
+ --color-select-caret: rgba(19, 52, 59, 0.8);
679
+
680
+ /* Common style patterns */
681
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
682
+ --focus-outline: 2px solid var(--color-primary);
683
+ --status-bg-opacity: 0.15;
684
+ --status-border-opacity: 0.25;
685
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
686
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
687
+
688
+ /* RGB versions for opacity control */
689
+ --color-success-rgb: 33, 128, 141;
690
+ --color-error-rgb: 192, 21, 47;
691
+ --color-warning-rgb: 168, 75, 47;
692
+ --color-info-rgb: 98, 108, 113;
693
+
694
+ /* Typography */
695
+ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
696
+ BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
697
+ --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
698
+ Monaco, Consolas, monospace;
699
+ --font-size-xs: 11px;
700
+ --font-size-sm: 12px;
701
+ --font-size-base: 14px;
702
+ --font-size-md: 14px;
703
+ --font-size-lg: 16px;
704
+ --font-size-xl: 18px;
705
+ --font-size-2xl: 20px;
706
+ --font-size-3xl: 24px;
707
+ --font-size-4xl: 30px;
708
+ --font-weight-normal: 400;
709
+ --font-weight-medium: 500;
710
+ --font-weight-semibold: 550;
711
+ --font-weight-bold: 600;
712
+ --line-height-tight: 1.2;
713
+ --line-height-normal: 1.5;
714
+ --letter-spacing-tight: -0.01em;
715
+
716
+ /* Spacing */
717
+ --space-0: 0;
718
+ --space-1: 1px;
719
+ --space-2: 2px;
720
+ --space-4: 4px;
721
+ --space-6: 6px;
722
+ --space-8: 8px;
723
+ --space-10: 10px;
724
+ --space-12: 12px;
725
+ --space-16: 16px;
726
+ --space-20: 20px;
727
+ --space-24: 24px;
728
+ --space-32: 32px;
729
+
730
+ /* Border Radius */
731
+ --radius-sm: 6px;
732
+ --radius-base: 8px;
733
+ --radius-md: 10px;
734
+ --radius-lg: 12px;
735
+ --radius-full: 9999px;
736
+
737
+ /* Shadows */
738
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
739
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
740
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
741
+ 0 2px 4px -1px rgba(0, 0, 0, 0.02);
742
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
743
+ 0 4px 6px -2px rgba(0, 0, 0, 0.02);
744
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
745
+ inset 0 -1px 0 rgba(0, 0, 0, 0.03);
746
+
747
+ /* Animation */
748
+ --duration-fast: 150ms;
749
+ --duration-normal: 250ms;
750
+ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
751
+
752
+ /* Layout */
753
+ --container-sm: 640px;
754
+ --container-md: 768px;
755
+ --container-lg: 1024px;
756
+ --container-xl: 1280px;
757
+ }
758
+
759
+ /* Dark mode colors */
760
+ @media (prefers-color-scheme: dark) {
761
+ :root {
762
+ --color-background: rgba(31, 33, 33, 1);
763
+ --color-surface: rgba(38, 40, 40, 1);
764
+ --color-text: rgba(245, 245, 245, 1);
765
+ --color-text-secondary: rgba(167, 169, 169, 0.7);
766
+ --color-primary: rgba(50, 184, 198, 1);
767
+ --color-primary-hover: rgba(45, 166, 178, 1);
768
+ --color-primary-active: rgba(41, 150, 161, 1);
769
+ --color-secondary: rgba(119, 124, 124, 0.15);
770
+ --color-secondary-hover: rgba(119, 124, 124, 0.25);
771
+ --color-secondary-active: rgba(119, 124, 124, 0.3);
772
+ --color-border: rgba(119, 124, 124, 0.3);
773
+ --color-error: rgba(255, 84, 89, 1);
774
+ --color-success: rgba(50, 184, 198, 1);
775
+ --color-warning: rgba(230, 129, 97, 1);
776
+ --color-info: rgba(167, 169, 169, 1);
777
+ --color-focus-ring: rgba(50, 184, 198, 0.4);
778
+ --color-btn-primary-text: rgba(19, 52, 59, 1);
779
+ --color-card-border: rgba(119, 124, 124, 0.2);
780
+ --color-card-border-inner: rgba(119, 124, 124, 0.15);
781
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
782
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
783
+ --button-border-secondary: rgba(119, 124, 124, 0.2);
784
+ --color-border-secondary: rgba(119, 124, 124, 0.2);
785
+ --color-select-caret: rgba(245, 245, 245, 0.8);
786
+
787
+ /* Common style patterns - updated for dark mode */
788
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
789
+ --focus-outline: 2px solid var(--color-primary);
790
+ --status-bg-opacity: 0.15;
791
+ --status-border-opacity: 0.25;
792
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
793
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
794
+
795
+ /* RGB versions for dark mode */
796
+ --color-success-rgb: 50, 184, 198;
797
+ --color-error-rgb: 255, 84, 89;
798
+ --color-warning-rgb: 230, 129, 97;
799
+ --color-info-rgb: 167, 169, 169;
800
+ }
801
+ }
802
+
803
+ /* Data attribute for manual theme switching */
804
+ [data-color-scheme="dark"] {
805
+ --color-background: rgba(31, 33, 33, 1);
806
+ --color-surface: rgba(38, 40, 40, 1);
807
+ --color-text: rgba(245, 245, 245, 1);
808
+ --color-text-secondary: rgba(167, 169, 169, 0.7);
809
+ --color-primary: rgba(50, 184, 198, 1);
810
+ --color-primary-hover: rgba(45, 166, 178, 1);
811
+ --color-primary-active: rgba(41, 150, 161, 1);
812
+ --color-secondary: rgba(119, 124, 124, 0.15);
813
+ --color-secondary-hover: rgba(119, 124, 124, 0.25);
814
+ --color-secondary-active: rgba(119, 124, 124, 0.3);
815
+ --color-border: rgba(119, 124, 124, 0.3);
816
+ --color-error: rgba(255, 84, 89, 1);
817
+ --color-success: rgba(50, 184, 198, 1);
818
+ --color-warning: rgba(230, 129, 97, 1);
819
+ --color-info: rgba(167, 169, 169, 1);
820
+ --color-focus-ring: rgba(50, 184, 198, 0.4);
821
+ --color-btn-primary-text: rgba(19, 52, 59, 1);
822
+ --color-card-border: rgba(119, 124, 124, 0.15);
823
+ --color-card-border-inner: rgba(119, 124, 124, 0.15);
824
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
825
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
826
+ --color-border-secondary: rgba(119, 124, 124, 0.2);
827
+ --color-select-caret: rgba(245, 245, 245, 0.8);
828
+
829
+ /* Common style patterns - updated for dark mode */
830
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
831
+ --focus-outline: 2px solid var(--color-primary);
832
+ --status-bg-opacity: 0.15;
833
+ --status-border-opacity: 0.25;
834
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
835
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
836
+
837
+ /* RGB versions for dark mode */
838
+ --color-success-rgb: 50, 184, 198;
839
+ --color-error-rgb: 255, 84, 89;
840
+ --color-warning-rgb: 230, 129, 97;
841
+ --color-info-rgb: 167, 169, 169;
842
+ }
843
+
844
+ [data-color-scheme="light"] {
845
+ --color-background: rgba(252, 252, 249, 1);
846
+ --color-surface: rgba(255, 255, 253, 1);
847
+ --color-text: rgba(19, 52, 59, 1);
848
+ --color-text-secondary: rgba(98, 108, 113, 1);
849
+ --color-primary: rgba(33, 128, 141, 1);
850
+ --color-primary-hover: rgba(29, 116, 128, 1);
851
+ --color-primary-active: rgba(26, 104, 115, 1);
852
+ --color-secondary: rgba(94, 82, 64, 0.12);
853
+ --color-secondary-hover: rgba(94, 82, 64, 0.2);
854
+ --color-secondary-active: rgba(94, 82, 64, 0.25);
855
+ --color-border: rgba(94, 82, 64, 0.2);
856
+ --color-btn-primary-text: rgba(252, 252, 249, 1);
857
+ --color-card-border: rgba(94, 82, 64, 0.12);
858
+ --color-card-border-inner: rgba(94, 82, 64, 0.12);
859
+ --color-error: rgba(192, 21, 47, 1);
860
+ --color-success: rgba(33, 128, 141, 1);
861
+ --color-warning: rgba(168, 75, 47, 1);
862
+ --color-info: rgba(98, 108, 113, 1);
863
+ --color-focus-ring: rgba(33, 128, 141, 0.4);
864
+
865
+ /* RGB versions for light mode */
866
+ --color-success-rgb: 33, 128, 141;
867
+ --color-error-rgb: 192, 21, 47;
868
+ --color-warning-rgb: 168, 75, 47;
869
+ --color-info-rgb: 98, 108, 113;
870
+ }
871
+
872
+ /* Base styles */
873
+ html {
874
+ font-size: var(--font-size-base);
875
+ font-family: var(--font-family-base);
876
+ line-height: var(--line-height-normal);
877
+ color: var(--color-text);
878
+ background-color: var(--color-background);
879
+ -webkit-font-smoothing: antialiased;
880
+ box-sizing: border-box;
881
+ }
882
+
883
+ body {
884
+ margin: 0;
885
+ padding: 0;
886
+ }
887
+
888
+ *,
889
+ *::before,
890
+ *::after {
891
+ box-sizing: inherit;
892
+ }
893
+
894
+ /* Typography */
895
+ h1,
896
+ h2,
897
+ h3,
898
+ h4,
899
+ h5,
900
+ h6 {
901
+ margin: 0;
902
+ font-weight: var(--font-weight-semibold);
903
+ line-height: var(--line-height-tight);
904
+ color: var(--color-text);
905
+ letter-spacing: var(--letter-spacing-tight);
906
+ }
907
+
908
+ h1 {
909
+ font-size: var(--font-size-4xl);
910
+ }
911
+ h2 {
912
+ font-size: var(--font-size-3xl);
913
+ }
914
+ h3 {
915
+ font-size: var(--font-size-2xl);
916
+ }
917
+ h4 {
918
+ font-size: var(--font-size-xl);
919
+ }
920
+ h5 {
921
+ font-size: var(--font-size-lg);
922
+ }
923
+ h6 {
924
+ font-size: var(--font-size-md);
925
+ }
926
+
927
+ p {
928
+ margin: 0 0 var(--space-16) 0;
929
+ }
930
+
931
+ a {
932
+ color: var(--color-primary);
933
+ text-decoration: none;
934
+ transition: color var(--duration-fast) var(--ease-standard);
935
+ }
936
+
937
+ a:hover {
938
+ color: var(--color-primary-hover);
939
+ }
940
+
941
+ code,
942
+ pre {
943
+ font-family: var(--font-family-mono);
944
+ font-size: calc(var(--font-size-base) * 0.95);
945
+ background-color: var(--color-secondary);
946
+ border-radius: var(--radius-sm);
947
+ }
948
+
949
+ code {
950
+ padding: var(--space-1) var(--space-4);
951
+ }
952
+
953
+ pre {
954
+ padding: var(--space-16);
955
+ margin: var(--space-16) 0;
956
+ overflow: auto;
957
+ border: 1px solid var(--color-border);
958
+ }
959
+
960
+ pre code {
961
+ background: none;
962
+ padding: 0;
963
+ }
964
+
965
+ /* Buttons */
966
+ .btn {
967
+ display: inline-flex;
968
+ align-items: center;
969
+ justify-content: center;
970
+ padding: var(--space-8) var(--space-16);
971
+ border-radius: var(--radius-base);
972
+ font-size: var(--font-size-base);
973
+ font-weight: 500;
974
+ line-height: 1.5;
975
+ cursor: pointer;
976
+ transition: all var(--duration-normal) var(--ease-standard);
977
+ border: none;
978
+ text-decoration: none;
979
+ position: relative;
980
+ }
981
+
982
+ .btn:focus-visible {
983
+ outline: none;
984
+ box-shadow: var(--focus-ring);
985
+ }
986
+
987
+ .btn--primary {
988
+ background: var(--color-primary);
989
+ color: var(--color-btn-primary-text);
990
+ }
991
+
992
+ .btn--primary:hover {
993
+ background: var(--color-primary-hover);
994
+ }
995
+
996
+ .btn--primary:active {
997
+ background: var(--color-primary-active);
998
+ }
999
+
1000
+ .btn--secondary {
1001
+ background: var(--color-secondary);
1002
+ color: var(--color-text);
1003
+ }
1004
+
1005
+ .btn--secondary:hover {
1006
+ background: var(--color-secondary-hover);
1007
+ }
1008
+
1009
+ .btn--secondary:active {
1010
+ background: var(--color-secondary-active);
1011
+ }
1012
+
1013
+ .btn--outline {
1014
+ background: transparent;
1015
+ border: 1px solid var(--color-border);
1016
+ color: var(--color-text);
1017
+ }
1018
+
1019
+ .btn--outline:hover {
1020
+ background: var(--color-secondary);
1021
+ }
1022
+
1023
+ .btn--sm {
1024
+ padding: var(--space-4) var(--space-12);
1025
+ font-size: var(--font-size-sm);
1026
+ border-radius: var(--radius-sm);
1027
+ }
1028
+
1029
+ .btn--lg {
1030
+ padding: var(--space-10) var(--space-20);
1031
+ font-size: var(--font-size-lg);
1032
+ border-radius: var(--radius-md);
1033
+ }
1034
+
1035
+ .btn--full-width {
1036
+ width: 100%;
1037
+ }
1038
+
1039
+ .btn:disabled {
1040
+ opacity: 0.5;
1041
+ cursor: not-allowed;
1042
+ }
1043
+
1044
+ /* Dashboard Layout */
1045
+ .dashboard {
1046
+ min-height: 100vh;
1047
+ background: var(--color-background);
1048
+ }
1049
+
1050
+ .dashboard-header {
1051
+ background: var(--color-surface);
1052
+ border-bottom: 1px solid var(--color-border);
1053
+ padding: var(--space-24) 0;
1054
+ position: sticky;
1055
+ top: 0;
1056
+ z-index: 100;
1057
+ box-shadow: var(--shadow-sm);
1058
+ }
1059
+
1060
+ .dashboard-title {
1061
+ font-size: var(--font-size-4xl);
1062
+ color: var(--color-primary);
1063
+ text-align: center;
1064
+ margin-bottom: var(--space-8);
1065
+ }
1066
+
1067
+ .subtitle {
1068
+ text-align: center;
1069
+ color: var(--color-text-secondary);
1070
+ font-size: var(--font-size-lg);
1071
+ }
1072
+
1073
+ .dashboard-content {
1074
+ display: grid;
1075
+ grid-template-columns: 280px 1fr;
1076
+ gap: var(--space-24);
1077
+ max-width: 1400px;
1078
+ margin: 0 auto;
1079
+ padding: var(--space-24);
1080
+ }
1081
+
1082
+ @media (max-width: 768px) {
1083
+ .dashboard-content {
1084
+ grid-template-columns: 1fr;
1085
+ gap: var(--space-16);
1086
+ padding: var(--space-16);
1087
+ }
1088
+
1089
+ .sidebar {
1090
+ order: 1;
1091
+ }
1092
+
1093
+ .main-content {
1094
+ order: 0;
1095
+ }
1096
+ }
1097
+
1098
+ /* Sidebar */
1099
+ .sidebar {
1100
+ background: var(--color-surface);
1101
+ border-radius: var(--radius-lg);
1102
+ border: 1px solid var(--color-card-border);
1103
+ padding: var(--space-20);
1104
+ height: fit-content;
1105
+ position: sticky;
1106
+ top: 140px;
1107
+ }
1108
+
1109
+ .nav-section {
1110
+ margin-bottom: var(--space-24);
1111
+ }
1112
+
1113
+ .nav-section h3 {
1114
+ font-size: var(--font-size-lg);
1115
+ margin-bottom: var(--space-12);
1116
+ color: var(--color-text);
1117
+ }
1118
+
1119
+ .nav-item {
1120
+ display: flex;
1121
+ align-items: center;
1122
+ gap: var(--space-12);
1123
+ padding: var(--space-12);
1124
+ border-radius: var(--radius-base);
1125
+ cursor: pointer;
1126
+ transition: all var(--duration-fast) var(--ease-standard);
1127
+ border: none;
1128
+ background: none;
1129
+ color: var(--color-text);
1130
+ width: 100%;
1131
+ text-align: left;
1132
+ font-size: var(--font-size-base);
1133
+ }
1134
+
1135
+ .nav-item:hover {
1136
+ background: var(--color-secondary);
1137
+ }
1138
+
1139
+ .nav-item.active {
1140
+ background: var(--color-primary);
1141
+ color: var(--color-btn-primary-text);
1142
+ }
1143
+
1144
+ .nav-icon {
1145
+ font-size: var(--font-size-xl);
1146
+ width: 32px;
1147
+ display: flex;
1148
+ align-items: center;
1149
+ justify-content: center;
1150
+ }
1151
+
1152
+ .profession-nav {
1153
+ display: flex;
1154
+ flex-direction: column;
1155
+ gap: var(--space-4);
1156
+ }
1157
+
1158
+ /* Main Content */
1159
+ .main-content {
1160
+ background: var(--color-surface);
1161
+ border-radius: var(--radius-lg);
1162
+ border: 1px solid var(--color-card-border);
1163
+ padding: var(--space-32);
1164
+ box-shadow: var(--shadow-sm);
1165
+ }
1166
+
1167
+ .page {
1168
+ display: none;
1169
+ }
1170
+
1171
+ .page.active {
1172
+ display: block;
1173
+ }
1174
+
1175
+ /* Home Page */
1176
+ .hero-section {
1177
+ text-align: center;
1178
+ margin-bottom: var(--space-32);
1179
+ padding: var(--space-32) 0;
1180
+ }
1181
+
1182
+ .hero-description {
1183
+ font-size: var(--font-size-lg);
1184
+ color: var(--color-text-secondary);
1185
+ max-width: 800px;
1186
+ margin: 0 auto var(--space-24) auto;
1187
+ line-height: 1.6;
1188
+ }
1189
+
1190
+ .stats-grid {
1191
+ display: grid;
1192
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1193
+ gap: var(--space-20);
1194
+ margin-bottom: var(--space-32);
1195
+ }
1196
+
1197
+ .stat-card {
1198
+ background: var(--color-surface);
1199
+ border: 1px solid var(--color-card-border);
1200
+ border-radius: var(--radius-lg);
1201
+ padding: var(--space-24);
1202
+ text-align: center;
1203
+ transition: all var(--duration-normal) var(--ease-standard);
1204
+ }
1205
+
1206
+ .stat-card:hover {
1207
+ box-shadow: var(--shadow-md);
1208
+ transform: translateY(-2px);
1209
+ }
1210
+
1211
+ .stat-card.highlight {
1212
+ border-color: var(--color-warning);
1213
+ background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.05));
1214
+ }
1215
+
1216
+ .stat-number {
1217
+ font-size: var(--font-size-4xl);
1218
+ font-weight: var(--font-weight-bold);
1219
+ color: var(--color-primary);
1220
+ margin-bottom: var(--space-12);
1221
+ }
1222
+
1223
+ .stat-card.highlight .stat-number {
1224
+ color: var(--color-warning);
1225
+ }
1226
+
1227
+ .stat-label {
1228
+ font-size: var(--font-size-base);
1229
+ color: var(--color-text-secondary);
1230
+ line-height: 1.5;
1231
+ }
1232
+
1233
+ .benefits-section {
1234
+ margin-top: var(--space-32);
1235
+ }
1236
+
1237
+ .benefits-section h3 {
1238
+ text-align: center;
1239
+ margin-bottom: var(--space-24);
1240
+ font-size: var(--font-size-3xl);
1241
+ color: var(--color-primary);
1242
+ }
1243
+
1244
+ .benefits-grid {
1245
+ display: grid;
1246
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1247
+ gap: var(--space-20);
1248
+ }
1249
+
1250
+ .benefit-card {
1251
+ background: var(--color-surface);
1252
+ border: 1px solid var(--color-card-border);
1253
+ border-radius: var(--radius-lg);
1254
+ padding: var(--space-20);
1255
+ text-align: center;
1256
+ transition: all var(--duration-normal) var(--ease-standard);
1257
+ }
1258
+
1259
+ .benefit-card:hover {
1260
+ box-shadow: var(--shadow-md);
1261
+ transform: translateY(-2px);
1262
+ }
1263
+
1264
+ .benefit-icon {
1265
+ font-size: var(--font-size-4xl);
1266
+ margin-bottom: var(--space-16);
1267
  }
1268
 
1269
+ .benefit-card h4 {
1270
+ margin-bottom: var(--space-12);
1271
+ color: var(--color-text);
1272
  }
1273
+
1274
+ .benefit-card p {
1275
+ color: var(--color-text-secondary);
1276
+ font-size: var(--font-size-sm);
1277
+ margin: 0;
1278
+ }
1279
+
1280
+ /* Profession Pages */
1281
+ .profession-header {
1282
+ display: flex;
1283
+ align-items: center;
1284
+ gap: var(--space-16);
1285
+ margin-bottom: var(--space-24);
1286
+ padding-bottom: var(--space-16);
1287
+ border-bottom: 1px solid var(--color-border);
1288
+ }
1289
+
1290
+ .profession-icon {
1291
+ font-size: var(--font-size-4xl);
1292
+ width: 80px;
1293
+ height: 80px;
1294
+ display: flex;
1295
+ align-items: center;
1296
+ justify-content: center;
1297
+ background: var(--color-primary);
1298
+ border-radius: var(--radius-lg);
1299
+ color: var(--color-btn-primary-text);
1300
+ }
1301
+
1302
+ .profession-title {
1303
+ font-size: var(--font-size-3xl);
1304
+ color: var(--color-text);
1305
+ }
1306
+
1307
+ .uses-section, .example-section, .metrics-section {
1308
+ margin-bottom: var(--space-32);
1309
+ }
1310
+
1311
+ .uses-list {
1312
+ display: grid;
1313
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1314
+ gap: var(--space-12);
1315
+ margin-top: var(--space-16);
1316
+ }
1317
+
1318
+ .use-item {
1319
+ background: var(--color-secondary);
1320
+ padding: var(--space-12);
1321
+ border-radius: var(--radius-base);
1322
+ border: 1px solid var(--color-border);
1323
+ }
1324
+
1325
+ .example-card {
1326
+ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
1327
+ color: var(--color-btn-primary-text);
1328
+ padding: var(--space-20);
1329
+ border-radius: var(--radius-lg);
1330
+ margin-top: var(--space-16);
1331
+ }
1332
+
1333
+ .metrics-grid {
1334
+ display: grid;
1335
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1336
+ gap: var(--space-12);
1337
+ margin-top: var(--space-16);
1338
+ }
1339
+
1340
+ .metric-tag {
1341
+ background: var(--color-surface);
1342
+ border: 1px solid var(--color-border);
1343
+ padding: var(--space-8) var(--space-12);
1344
+ border-radius: var(--radius-full);
1345
+ text-align: center;
1346
+ font-size: var(--font-size-sm);
1347
+ font-weight: var(--font-weight-medium);
1348
+ }
1349
+
1350
+ .interactive-section {
1351
+ background: var(--color-secondary);
1352
+ padding: var(--space-24);
1353
+ border-radius: var(--radius-lg);
1354
+ border: 2px dashed var(--color-border);
1355
+ text-align: center;
1356
+ margin-top: var(--space-24);
1357
+ }
1358
+
1359
+ /* Literacy Levels */
1360
+ .literacy-header {
1361
+ text-align: center;
1362
+ margin-bottom: var(--space-32);
1363
+ }
1364
+
1365
+ .literacy-levels {
1366
+ display: flex;
1367
+ flex-direction: column;
1368
+ gap: var(--space-16);
1369
+ margin-bottom: var(--space-32);
1370
+ }
1371
+
1372
+ .literacy-level {
1373
+ background: var(--color-surface);
1374
+ border: 1px solid var(--color-card-border);
1375
+ border-radius: var(--radius-lg);
1376
+ padding: var(--space-20);
1377
+ display: flex;
1378
+ align-items: center;
1379
+ gap: var(--space-20);
1380
+ transition: all var(--duration-normal) var(--ease-standard);
1381
+ }
1382
+
1383
+ .literacy-level:hover {
1384
+ box-shadow: var(--shadow-md);
1385
+ transform: translateY(-2px);
1386
+ }
1387
+
1388
+ .level-number {
1389
+ width: 60px;
1390
+ height: 60px;
1391
+ background: var(--color-primary);
1392
+ color: var(--color-btn-primary-text);
1393
+ border-radius: var(--radius-full);
1394
+ display: flex;
1395
+ align-items: center;
1396
+ justify-content: center;
1397
+ font-size: var(--font-size-2xl);
1398
+ font-weight: var(--font-weight-bold);
1399
+ flex-shrink: 0;
1400
+ }
1401
+
1402
+ .level-info {
1403
+ flex: 1;
1404
+ }
1405
+
1406
+ .level-name {
1407
+ font-size: var(--font-size-xl);
1408
+ font-weight: var(--font-weight-semibold);
1409
+ margin-bottom: var(--space-8);
1410
+ }
1411
+
1412
+ .level-description {
1413
+ color: var(--color-text-secondary);
1414
+ margin-bottom: var(--space-12);
1415
+ }
1416
+
1417
+ .level-skills {
1418
+ display: flex;
1419
+ flex-wrap: wrap;
1420
+ gap: var(--space-8);
1421
+ }
1422
+
1423
+ .skill-tag {
1424
+ background: var(--color-secondary);
1425
+ padding: var(--space-4) var(--space-8);
1426
+ border-radius: var(--radius-sm);
1427
+ font-size: var(--font-size-xs);
1428
+ }
1429
+
1430
+ .literacy-test {
1431
+ background: var(--color-secondary);
1432
+ padding: var(--space-24);
1433
+ border-radius: var(--radius-lg);
1434
+ text-align: center;
1435
+ }
1436
+
1437
+ /* Modal */
1438
+ .modal {
1439
+ display: none;
1440
+ position: fixed;
1441
+ top: 0;
1442
+ left: 0;
1443
+ width: 100%;
1444
+ height: 100%;
1445
+ background: rgba(0, 0, 0, 0.5);
1446
+ z-index: 1000;
1447
+ align-items: center;
1448
+ justify-content: center;
1449
+ }
1450
+
1451
+ .modal.active {
1452
+ display: flex;
1453
+ }
1454
+
1455
+ .modal-content {
1456
+ background: var(--color-surface);
1457
+ border-radius: var(--radius-lg);
1458
+ max-width: 800px;
1459
+ max-height: 80vh;
1460
+ overflow-y: auto;
1461
+ margin: var(--space-20);
1462
+ box-shadow: var(--shadow-lg);
1463
+ width: 100%;
1464
+ }
1465
+
1466
+ .modal-header {
1467
+ display: flex;
1468
+ justify-content: space-between;
1469
+ align-items: center;
1470
+ padding: var(--space-20);
1471
+ border-bottom: 1px solid var(--color-border);
1472
+ }
1473
+
1474
+ .modal-close {
1475
+ background: none;
1476
+ border: none;
1477
+ font-size: var(--font-size-3xl);
1478
+ cursor: pointer;
1479
+ color: var(--color-text-secondary);
1480
+ padding: 0;
1481
+ width: 32px;
1482
+ height: 32px;
1483
+ display: flex;
1484
+ align-items: center;
1485
+ justify-content: center;
1486
+ border-radius: var(--radius-sm);
1487
+ }
1488
+
1489
+ .modal-close:hover {
1490
+ background: var(--color-secondary);
1491
+ }
1492
+
1493
+ .modal-body {
1494
+ padding: var(--space-20);
1495
+ }
1496
+
1497
+ /* Interactive Elements */
1498
+ .calculator-grid {
1499
+ display: grid;
1500
+ grid-template-columns: repeat(2, 1fr);
1501
+ gap: var(--space-16);
1502
+ margin-bottom: var(--space-20);
1503
+ }
1504
+
1505
+ .form-group {
1506
+ margin-bottom: var(--space-16);
1507
+ }
1508
+
1509
+ .form-label {
1510
+ display: block;
1511
+ margin-bottom: var(--space-8);
1512
+ font-weight: var(--font-weight-medium);
1513
+ font-size: var(--font-size-sm);
1514
+ }
1515
+
1516
+ .form-control {
1517
+ display: block;
1518
+ width: 100%;
1519
+ padding: var(--space-8) var(--space-12);
1520
+ font-size: var(--font-size-md);
1521
+ line-height: 1.5;
1522
+ color: var(--color-text);
1523
+ background-color: var(--color-surface);
1524
+ border: 1px solid var(--color-border);
1525
+ border-radius: var(--radius-base);
1526
+ transition: border-color var(--duration-fast) var(--ease-standard),
1527
+ box-shadow var(--duration-fast) var(--ease-standard);
1528
+ }
1529
+
1530
+ .form-control:focus {
1531
+ border-color: var(--color-primary);
1532
+ outline: var(--focus-outline);
1533
+ }
1534
+
1535
+ .result-card {
1536
+ background: var(--color-primary);
1537
+ color: var(--color-btn-primary-text);
1538
+ padding: var(--space-20);
1539
+ border-radius: var(--radius-lg);
1540
+ text-align: center;
1541
+ margin-top: var(--space-16);
1542
+ }
1543
+
1544
+ .result-value {
1545
+ font-size: var(--font-size-3xl);
1546
+ font-weight: var(--font-weight-bold);
1547
+ margin-bottom: var(--space-8);
1548
+ }
1549
+
1550
+ .simulator-controls {
1551
+ display: grid;
1552
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1553
+ gap: var(--space-16);
1554
+ margin-bottom: var(--space-20);
1555
+ }
1556
+
1557
+ .slider-group {
1558
+ margin-bottom: var(--space-16);
1559
+ }
1560
+
1561
+ .slider {
1562
+ width: 100%;
1563
+ height: 8px;
1564
+ border-radius: var(--radius-full);
1565
+ background: var(--color-border);
1566
+ outline: none;
1567
+ margin-top: var(--space-8);
1568
+ }
1569
+
1570
+ .slider::-webkit-slider-thumb {
1571
+ appearance: none;
1572
+ width: 20px;
1573
+ height: 20px;
1574
+ border-radius: 50%;
1575
+ background: var(--color-primary);
1576
+ cursor: pointer;
1577
+ }
1578
+
1579
+ .slider::-moz-range-thumb {
1580
+ width: 20px;
1581
+ height: 20px;
1582
+ border-radius: 50%;
1583
+ background: var(--color-primary);
1584
+ cursor: pointer;
1585
+ border: none;
1586
+ }
1587
+
1588
+ .test-question {
1589
+ margin-bottom: var(--space-24);
1590
+ }
1591
+
1592
+ .test-options {
1593
+ display: flex;
1594
+ flex-direction: column;
1595
+ gap: var(--space-8);
1596
+ margin-top: var(--space-12);
1597
+ }
1598
+
1599
+ .test-option {
1600
+ background: var(--color-surface);
1601
+ border: 2px solid var(--color-border);
1602
+ border-radius: var(--radius-base);
1603
+ padding: var(--space-12);
1604
+ cursor: pointer;
1605
+ transition: all var(--duration-fast) var(--ease-standard);
1606
+ }
1607
+
1608
+ .test-option:hover {
1609
+ border-color: var(--color-primary);
1610
+ background: var(--color-secondary);
1611
+ }
1612
+
1613
+ .test-option.selected {
1614
+ border-color: var(--color-primary);
1615
+ background: var(--color-primary);
1616
+ color: var(--color-btn-primary-text);
1617
+ }
1618
+
1619
+ .test-navigation {
1620
+ display: flex;
1621
+ justify-content: space-between;
1622
+ align-items: center;
1623
+ margin-top: var(--space-24);
1624
+ padding-top: var(--space-16);
1625
+ border-top: 1px solid var(--color-border);
1626
+ }
1627
+
1628
+ .test-progress {
1629
+ font-size: var(--font-size-sm);
1630
+ color: var(--color-text-secondary);
1631
+ }
1632
+
1633
+ @font-face {
1634
+ font-family: 'FKGroteskNeue';
1635
+ src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
1636
+ format('woff2');
1637
+ }