relmio 0.2.6 → 0.2.7
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.
- package/CHANGELOG.md +21 -0
- package/README.md +19 -18
- package/docs/images/setup/01-local-sign-in-ready.png +0 -0
- package/docs/images/setup/02-vps-identity-confirmed.png +0 -0
- package/docs/images/setup/03-n8n-detected.png +0 -0
- package/docs/images/setup/04-install-plan.png +0 -0
- package/docs/images/setup/05-bridge-ready.png +0 -0
- package/package.json +1 -1
- package/src/ui/app.js +6 -21
- package/src/ui/index.html +404 -452
- package/src/ui/styles.css +580 -667
- package/src/ui/theme.js +50 -0
- package/src/web/server.js +5 -7
- package/src/ui/geist-latin.woff2 +0 -0
package/src/ui/styles.css
CHANGED
|
@@ -1,68 +1,89 @@
|
|
|
1
|
-
@font-face {
|
|
2
|
-
font-family: "Relmio Geist";
|
|
3
|
-
font-style: normal;
|
|
4
|
-
font-weight: 100 900;
|
|
5
|
-
font-display: swap;
|
|
6
|
-
src: url("/geist-latin.woff2") format("woff2");
|
|
7
|
-
}
|
|
8
|
-
|
|
9
1
|
:root {
|
|
10
|
-
color-scheme: light
|
|
11
|
-
--
|
|
12
|
-
--surface: #
|
|
13
|
-
--surface-
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
--
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
--radius-
|
|
38
|
-
--
|
|
2
|
+
color-scheme: light;
|
|
3
|
+
--background: #f4f2ec;
|
|
4
|
+
--surface: #ffffff;
|
|
5
|
+
--surface-muted: #f7f6f1;
|
|
6
|
+
--text: #0d1b18;
|
|
7
|
+
--text-muted: #53655f;
|
|
8
|
+
--border: #dde3df;
|
|
9
|
+
--border-strong: #b9c4bf;
|
|
10
|
+
--accent: #137c74;
|
|
11
|
+
--accent-deep: #0c5f59;
|
|
12
|
+
--accent-bright: #1ba397;
|
|
13
|
+
--accent-soft: #e9f4ef;
|
|
14
|
+
--accent-border: #b9d9d2;
|
|
15
|
+
--accent-icon: #d3eae0;
|
|
16
|
+
--accent-copy: #355a54;
|
|
17
|
+
--warning: #8a4b0f;
|
|
18
|
+
--warning-soft: #fff4e2;
|
|
19
|
+
--warning-border: #e3c491;
|
|
20
|
+
--danger: #a22b2b;
|
|
21
|
+
--danger-soft: #fff0f0;
|
|
22
|
+
--danger-border: #e4abab;
|
|
23
|
+
--success: #17653f;
|
|
24
|
+
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
25
|
+
--shadow-sm: 0 1px 2px rgb(13 27 24 / 5%);
|
|
26
|
+
--shadow-md:
|
|
27
|
+
0 1px 2px rgb(13 27 24 / 4%),
|
|
28
|
+
0 12px 36px -14px rgb(13 27 24 / 18%);
|
|
29
|
+
--radius-sm: 0.5rem;
|
|
30
|
+
--radius: 0.875rem;
|
|
31
|
+
--radius-lg: 1.25rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root[data-theme="dark"] {
|
|
35
|
+
color-scheme: dark;
|
|
36
|
+
--background: #101513;
|
|
37
|
+
--surface: #1d2421;
|
|
38
|
+
--surface-muted: #171d1b;
|
|
39
|
+
--text: #edf3f0;
|
|
40
|
+
--text-muted: #a9b8b3;
|
|
41
|
+
--border: #303a36;
|
|
42
|
+
--border-strong: #52615b;
|
|
43
|
+
--accent-bright: #52c7bb;
|
|
44
|
+
--accent-soft: #1c2925;
|
|
45
|
+
--accent-border: #35564f;
|
|
46
|
+
--accent-icon: #20342f;
|
|
47
|
+
--accent-copy: #b8d8d1;
|
|
48
|
+
--warning: #f0b37f;
|
|
49
|
+
--warning-soft: #2a2118;
|
|
50
|
+
--warning-border: #725237;
|
|
51
|
+
--danger: #f09a9a;
|
|
52
|
+
--danger-soft: #2b1b1b;
|
|
53
|
+
--danger-border: #744141;
|
|
54
|
+
--success: #61c897;
|
|
55
|
+
--shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
|
|
56
|
+
--shadow-md:
|
|
57
|
+
0 1px 2px rgb(0 0 0 / 22%),
|
|
58
|
+
0 12px 36px -14px rgb(0 0 0 / 58%);
|
|
39
59
|
}
|
|
40
60
|
|
|
41
61
|
@media (prefers-color-scheme: dark) {
|
|
42
|
-
:root {
|
|
43
|
-
|
|
44
|
-
--
|
|
45
|
-
--surface
|
|
46
|
-
--surface-muted: #
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
--warning
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
--danger
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--shadow:
|
|
64
|
-
|
|
65
|
-
0
|
|
62
|
+
:root:not([data-theme]) {
|
|
63
|
+
color-scheme: dark;
|
|
64
|
+
--background: #101513;
|
|
65
|
+
--surface: #1d2421;
|
|
66
|
+
--surface-muted: #171d1b;
|
|
67
|
+
--text: #edf3f0;
|
|
68
|
+
--text-muted: #a9b8b3;
|
|
69
|
+
--border: #303a36;
|
|
70
|
+
--border-strong: #52615b;
|
|
71
|
+
--accent-bright: #52c7bb;
|
|
72
|
+
--accent-soft: #1c2925;
|
|
73
|
+
--accent-border: #35564f;
|
|
74
|
+
--accent-icon: #20342f;
|
|
75
|
+
--accent-copy: #b8d8d1;
|
|
76
|
+
--warning: #f0b37f;
|
|
77
|
+
--warning-soft: #2a2118;
|
|
78
|
+
--warning-border: #725237;
|
|
79
|
+
--danger: #f09a9a;
|
|
80
|
+
--danger-soft: #2b1b1b;
|
|
81
|
+
--danger-border: #744141;
|
|
82
|
+
--success: #61c897;
|
|
83
|
+
--shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
|
|
84
|
+
--shadow-md:
|
|
85
|
+
0 1px 2px rgb(0 0 0 / 22%),
|
|
86
|
+
0 12px 36px -14px rgb(0 0 0 / 58%);
|
|
66
87
|
}
|
|
67
88
|
}
|
|
68
89
|
|
|
@@ -71,25 +92,23 @@
|
|
|
71
92
|
}
|
|
72
93
|
|
|
73
94
|
html {
|
|
74
|
-
min-width: 0;
|
|
75
|
-
background: var(--canvas);
|
|
76
|
-
color: var(--ink);
|
|
77
95
|
font-family:
|
|
78
|
-
|
|
79
|
-
|
|
96
|
+
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
97
|
+
sans-serif;
|
|
98
|
+
color: var(--text);
|
|
99
|
+
background: var(--background);
|
|
80
100
|
scroll-behavior: smooth;
|
|
81
101
|
}
|
|
82
102
|
|
|
83
103
|
body {
|
|
84
|
-
min-width:
|
|
104
|
+
min-width: 20rem;
|
|
85
105
|
margin: 0;
|
|
86
106
|
line-height: 1.5;
|
|
87
107
|
-webkit-font-smoothing: antialiased;
|
|
88
|
-
text-rendering: optimizeLegibility;
|
|
89
108
|
}
|
|
90
109
|
|
|
91
110
|
::selection {
|
|
92
|
-
background:
|
|
111
|
+
background: rgb(19 124 116 / 22%);
|
|
93
112
|
}
|
|
94
113
|
|
|
95
114
|
button,
|
|
@@ -103,20 +122,12 @@ select {
|
|
|
103
122
|
min-height: 2.75rem;
|
|
104
123
|
}
|
|
105
124
|
|
|
106
|
-
button,
|
|
107
|
-
a,
|
|
108
|
-
input,
|
|
109
|
-
select {
|
|
110
|
-
-webkit-tap-highlight-color: transparent;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
125
|
button:focus-visible,
|
|
114
126
|
input:focus-visible,
|
|
115
127
|
select:focus-visible,
|
|
116
|
-
a:focus-visible
|
|
117
|
-
|
|
118
|
-
outline:
|
|
119
|
-
outline-offset: 0.1875rem;
|
|
128
|
+
a:focus-visible {
|
|
129
|
+
outline: 3px solid #f2a94a;
|
|
130
|
+
outline-offset: 2px;
|
|
120
131
|
}
|
|
121
132
|
|
|
122
133
|
[hidden] {
|
|
@@ -125,448 +136,459 @@ a:focus-visible,
|
|
|
125
136
|
|
|
126
137
|
.skip-link {
|
|
127
138
|
position: fixed;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
139
|
+
top: 0.5rem;
|
|
140
|
+
left: 0.5rem;
|
|
141
|
+
z-index: 10;
|
|
131
142
|
padding: 0.75rem 1rem;
|
|
132
|
-
border-radius:
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
transform: translateY(-180%);
|
|
138
|
-
transition: transform 160ms var(--ease);
|
|
143
|
+
border-radius: 999px;
|
|
144
|
+
color: #fff;
|
|
145
|
+
background: var(--text);
|
|
146
|
+
transform: translateY(-150%);
|
|
147
|
+
transition: transform 200ms var(--ease);
|
|
139
148
|
}
|
|
140
149
|
|
|
141
150
|
.skip-link:focus {
|
|
142
151
|
transform: translateY(0);
|
|
143
152
|
}
|
|
144
153
|
|
|
145
|
-
/* Header */
|
|
154
|
+
/* ---------- Header ---------- */
|
|
146
155
|
|
|
147
156
|
.site-header {
|
|
148
157
|
position: sticky;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
min-height: 4.25rem;
|
|
152
|
-
padding-inline: clamp(1rem, 4vw, 2.5rem);
|
|
153
|
-
border-block-end: 1px solid var(--line);
|
|
158
|
+
top: 0;
|
|
159
|
+
z-index: 20;
|
|
154
160
|
display: flex;
|
|
155
161
|
align-items: center;
|
|
156
162
|
justify-content: space-between;
|
|
157
|
-
|
|
158
|
-
|
|
163
|
+
min-height: 4.25rem;
|
|
164
|
+
padding: 0.75rem clamp(1rem, 4vw, 3rem);
|
|
165
|
+
border-bottom: 1px solid rgb(221 227 223 / 75%);
|
|
166
|
+
background: color-mix(in srgb, var(--background) 82%, transparent);
|
|
167
|
+
backdrop-filter: blur(14px) saturate(1.4);
|
|
168
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
|
159
169
|
}
|
|
160
170
|
|
|
161
171
|
.brand {
|
|
162
|
-
display:
|
|
172
|
+
display: flex;
|
|
163
173
|
align-items: center;
|
|
164
174
|
gap: 0.625rem;
|
|
165
|
-
|
|
166
|
-
font-size: 1.125rem;
|
|
175
|
+
font-size: 1.0625rem;
|
|
167
176
|
font-weight: 750;
|
|
168
|
-
letter-spacing: -0.
|
|
169
|
-
text-decoration: none;
|
|
177
|
+
letter-spacing: -0.01em;
|
|
170
178
|
}
|
|
171
179
|
|
|
172
180
|
.brand-mark {
|
|
173
|
-
|
|
174
|
-
|
|
181
|
+
display: block;
|
|
182
|
+
width: 2rem;
|
|
183
|
+
height: 2rem;
|
|
184
|
+
flex: none;
|
|
185
|
+
border-radius: 0.4375rem;
|
|
186
|
+
transition:
|
|
187
|
+
background 180ms var(--ease),
|
|
188
|
+
box-shadow 180ms var(--ease);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.header-actions {
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
gap: 0.625rem;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.theme-picker {
|
|
198
|
+
display: inline-flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
gap: 0.125rem;
|
|
201
|
+
min-width: 0;
|
|
202
|
+
margin: 0;
|
|
175
203
|
padding: 0.1875rem;
|
|
176
|
-
border
|
|
204
|
+
border: 1px solid var(--border);
|
|
205
|
+
border-radius: 0.625rem;
|
|
206
|
+
background: var(--surface-muted);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.theme-picker label {
|
|
210
|
+
position: relative;
|
|
211
|
+
cursor: pointer;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.theme-picker input {
|
|
215
|
+
position: absolute;
|
|
216
|
+
opacity: 0;
|
|
217
|
+
pointer-events: none;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.theme-picker span {
|
|
221
|
+
min-height: 2rem;
|
|
222
|
+
display: inline-flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
padding: 0 0.625rem;
|
|
226
|
+
border-radius: 0.4375rem;
|
|
227
|
+
color: var(--text-muted);
|
|
228
|
+
font-size: 0.6875rem;
|
|
229
|
+
font-weight: 700;
|
|
230
|
+
transition:
|
|
231
|
+
color 160ms var(--ease),
|
|
232
|
+
background 160ms var(--ease),
|
|
233
|
+
box-shadow 160ms var(--ease);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.theme-picker input:checked + span {
|
|
237
|
+
color: var(--text);
|
|
177
238
|
background: var(--surface);
|
|
239
|
+
box-shadow: var(--shadow-sm);
|
|
178
240
|
}
|
|
179
241
|
|
|
180
|
-
.
|
|
181
|
-
|
|
242
|
+
.theme-picker input:focus-visible + span {
|
|
243
|
+
outline: 3px solid #f2a94a;
|
|
244
|
+
outline-offset: 2px;
|
|
182
245
|
}
|
|
183
246
|
|
|
184
|
-
.
|
|
185
|
-
|
|
247
|
+
.visually-hidden {
|
|
248
|
+
position: absolute;
|
|
249
|
+
width: 1px;
|
|
250
|
+
height: 1px;
|
|
251
|
+
padding: 0;
|
|
252
|
+
margin: -1px;
|
|
253
|
+
overflow: hidden;
|
|
254
|
+
clip: rect(0 0 0 0);
|
|
255
|
+
white-space: nowrap;
|
|
256
|
+
border: 0;
|
|
186
257
|
}
|
|
187
258
|
|
|
188
259
|
.local-badge {
|
|
189
260
|
display: inline-flex;
|
|
190
261
|
align-items: center;
|
|
191
|
-
gap: 0.
|
|
192
|
-
|
|
193
|
-
|
|
262
|
+
gap: 0.4375rem;
|
|
263
|
+
padding: 0.4375rem 0.75rem;
|
|
264
|
+
border: 1px solid var(--border);
|
|
265
|
+
border-radius: 999px;
|
|
266
|
+
color: var(--text-muted);
|
|
267
|
+
background: var(--surface);
|
|
268
|
+
box-shadow: var(--shadow-sm);
|
|
269
|
+
font-size: 0.75rem;
|
|
194
270
|
font-weight: 650;
|
|
195
271
|
}
|
|
196
272
|
|
|
197
|
-
.local-badge
|
|
198
|
-
width: 0.
|
|
199
|
-
height: 0.
|
|
273
|
+
.local-badge::before {
|
|
274
|
+
width: 0.4375rem;
|
|
275
|
+
height: 0.4375rem;
|
|
200
276
|
border-radius: 50%;
|
|
201
|
-
background: var(--
|
|
277
|
+
background: var(--accent-bright);
|
|
278
|
+
content: "";
|
|
202
279
|
}
|
|
203
280
|
|
|
204
|
-
/*
|
|
281
|
+
/* ---------- Shell & intro ---------- */
|
|
205
282
|
|
|
206
|
-
.
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
283
|
+
.shell {
|
|
284
|
+
width: min(100% - 2rem, 54rem);
|
|
285
|
+
margin: 0 auto;
|
|
286
|
+
padding: 3.5rem 0 5rem;
|
|
210
287
|
}
|
|
211
288
|
|
|
212
|
-
.
|
|
213
|
-
|
|
289
|
+
.intro {
|
|
290
|
+
max-width: 44rem;
|
|
214
291
|
}
|
|
215
292
|
|
|
216
|
-
.
|
|
217
|
-
|
|
293
|
+
.eyebrow,
|
|
294
|
+
.step-kicker {
|
|
295
|
+
margin: 0 0 0.5rem;
|
|
296
|
+
color: var(--accent);
|
|
297
|
+
font-size: 0.75rem;
|
|
298
|
+
font-weight: 800;
|
|
299
|
+
letter-spacing: 0.09em;
|
|
300
|
+
text-transform: uppercase;
|
|
218
301
|
}
|
|
219
302
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
303
|
+
h1,
|
|
304
|
+
h2,
|
|
305
|
+
h3,
|
|
306
|
+
p {
|
|
307
|
+
margin-top: 0;
|
|
223
308
|
}
|
|
224
309
|
|
|
225
|
-
|
|
226
|
-
max-width:
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
310
|
+
h1 {
|
|
311
|
+
max-width: 42rem;
|
|
312
|
+
margin-bottom: 1rem;
|
|
313
|
+
font-size: clamp(2.1rem, 6.5vw, 3.4rem);
|
|
314
|
+
line-height: 1.04;
|
|
315
|
+
letter-spacing: -0.045em;
|
|
231
316
|
}
|
|
232
317
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
line-height: 1.65;
|
|
318
|
+
h2 {
|
|
319
|
+
margin-bottom: 0.5rem;
|
|
320
|
+
font-size: clamp(1.45rem, 4vw, 1.9rem);
|
|
321
|
+
line-height: 1.2;
|
|
322
|
+
letter-spacing: -0.025em;
|
|
239
323
|
}
|
|
240
324
|
|
|
241
|
-
|
|
242
|
-
margin-
|
|
243
|
-
|
|
244
|
-
display: grid;
|
|
245
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
325
|
+
h3 {
|
|
326
|
+
margin-bottom: 0.75rem;
|
|
327
|
+
font-size: 1rem;
|
|
246
328
|
}
|
|
247
329
|
|
|
248
|
-
.
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
gap: 0.25rem;
|
|
330
|
+
.lede,
|
|
331
|
+
.panel-heading p {
|
|
332
|
+
color: var(--text-muted);
|
|
252
333
|
}
|
|
253
334
|
|
|
254
|
-
.
|
|
255
|
-
|
|
335
|
+
.lede {
|
|
336
|
+
max-width: 42rem;
|
|
337
|
+
font-size: 1.0625rem;
|
|
256
338
|
}
|
|
257
339
|
|
|
258
|
-
|
|
259
|
-
border-inline-start: 1px solid var(--line);
|
|
260
|
-
}
|
|
340
|
+
/* ---------- Safety notes ---------- */
|
|
261
341
|
|
|
262
|
-
.
|
|
263
|
-
|
|
264
|
-
|
|
342
|
+
.safety-note {
|
|
343
|
+
position: relative;
|
|
344
|
+
display: grid;
|
|
345
|
+
grid-template-columns: 2.25rem 1fr;
|
|
346
|
+
gap: 0.25rem 0.875rem;
|
|
347
|
+
align-items: start;
|
|
348
|
+
margin: 1.25rem 0 0;
|
|
349
|
+
padding: 1rem 1.125rem;
|
|
350
|
+
border: 1px solid var(--accent-border);
|
|
351
|
+
border-radius: var(--radius);
|
|
352
|
+
background: var(--accent-soft);
|
|
353
|
+
box-shadow: var(--shadow-sm);
|
|
265
354
|
}
|
|
266
355
|
|
|
267
|
-
.
|
|
268
|
-
margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
|
|
356
|
+
.safety-note::before {
|
|
269
357
|
display: grid;
|
|
270
|
-
|
|
358
|
+
width: 2.25rem;
|
|
359
|
+
height: 2.25rem;
|
|
360
|
+
grid-row: span 2;
|
|
361
|
+
place-items: center;
|
|
362
|
+
border-radius: 0.625rem;
|
|
363
|
+
color: var(--accent-deep);
|
|
364
|
+
background: var(--accent-icon);
|
|
365
|
+
font-size: 1rem;
|
|
366
|
+
font-weight: 800;
|
|
367
|
+
content: "✓";
|
|
271
368
|
}
|
|
272
369
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
.route-rail {
|
|
276
|
-
min-width: 0;
|
|
277
|
-
overflow: hidden;
|
|
278
|
-
border: 1px solid var(--line-strong);
|
|
279
|
-
border-radius: var(--radius-lg);
|
|
280
|
-
background: var(--surface-raised);
|
|
370
|
+
.safety-note strong {
|
|
371
|
+
align-self: center;
|
|
281
372
|
}
|
|
282
373
|
|
|
283
|
-
.
|
|
284
|
-
|
|
285
|
-
border-block-end: 1px solid var(--line);
|
|
374
|
+
.safety-note span {
|
|
375
|
+
color: var(--accent-copy);
|
|
286
376
|
}
|
|
287
377
|
|
|
288
|
-
.
|
|
289
|
-
|
|
290
|
-
|
|
378
|
+
.backup-note {
|
|
379
|
+
border-color: var(--warning-border);
|
|
380
|
+
background: var(--warning-soft);
|
|
291
381
|
}
|
|
292
382
|
|
|
293
|
-
.
|
|
294
|
-
|
|
295
|
-
|
|
383
|
+
.backup-note::before {
|
|
384
|
+
color: var(--warning);
|
|
385
|
+
background: color-mix(in srgb, var(--warning) 18%, var(--surface));
|
|
386
|
+
content: "!";
|
|
296
387
|
}
|
|
297
388
|
|
|
298
|
-
.
|
|
299
|
-
|
|
300
|
-
color: var(--ink-soft);
|
|
301
|
-
font-size: 0.875rem;
|
|
389
|
+
.backup-note span {
|
|
390
|
+
color: var(--warning);
|
|
302
391
|
}
|
|
303
392
|
|
|
393
|
+
/* ---------- Stepper ---------- */
|
|
394
|
+
|
|
304
395
|
.steps {
|
|
305
|
-
|
|
396
|
+
margin: 2.5rem 0 1.25rem;
|
|
306
397
|
}
|
|
307
398
|
|
|
308
399
|
.steps ol {
|
|
400
|
+
display: grid;
|
|
401
|
+
grid-template-columns: repeat(5, 1fr);
|
|
309
402
|
margin: 0;
|
|
310
403
|
padding: 0;
|
|
311
|
-
display: grid;
|
|
312
|
-
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
313
404
|
list-style: none;
|
|
314
405
|
}
|
|
315
406
|
|
|
316
407
|
.steps li {
|
|
317
408
|
position: relative;
|
|
318
|
-
min-width: 0;
|
|
319
409
|
display: grid;
|
|
320
410
|
justify-items: center;
|
|
321
|
-
gap: 0.
|
|
322
|
-
color: var(--
|
|
411
|
+
gap: 0.4375rem;
|
|
412
|
+
color: var(--text-muted);
|
|
413
|
+
font-size: 0.75rem;
|
|
323
414
|
text-align: center;
|
|
324
415
|
}
|
|
325
416
|
|
|
326
417
|
.steps li::before {
|
|
327
418
|
position: absolute;
|
|
419
|
+
top: 0.9375rem;
|
|
420
|
+
right: 50%;
|
|
328
421
|
z-index: 0;
|
|
329
|
-
inset-block-start: 0.9375rem;
|
|
330
|
-
inset-inline-end: 50%;
|
|
331
422
|
width: 100%;
|
|
332
|
-
height:
|
|
333
|
-
background: var(--
|
|
423
|
+
height: 2px;
|
|
424
|
+
background: var(--border);
|
|
334
425
|
content: "";
|
|
426
|
+
transition: background 400ms var(--ease);
|
|
335
427
|
}
|
|
336
428
|
|
|
337
429
|
.steps li:first-child::before {
|
|
338
430
|
display: none;
|
|
339
431
|
}
|
|
340
432
|
|
|
341
|
-
.
|
|
433
|
+
.steps li span {
|
|
342
434
|
position: relative;
|
|
343
435
|
z-index: 1;
|
|
344
|
-
width: 1.875rem;
|
|
345
|
-
height: 1.875rem;
|
|
346
|
-
border: 1px solid var(--line-strong);
|
|
347
|
-
border-radius: 50%;
|
|
348
436
|
display: grid;
|
|
437
|
+
width: 2rem;
|
|
438
|
+
height: 2rem;
|
|
349
439
|
place-items: center;
|
|
440
|
+
border: 2px solid var(--border-strong);
|
|
441
|
+
border-radius: 50%;
|
|
350
442
|
background: var(--surface);
|
|
351
|
-
|
|
352
|
-
font-
|
|
443
|
+
box-shadow: var(--shadow-sm);
|
|
444
|
+
font-size: 0.8125rem;
|
|
445
|
+
font-weight: 800;
|
|
353
446
|
transition:
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
color
|
|
447
|
+
border-color 300ms var(--ease),
|
|
448
|
+
background 300ms var(--ease),
|
|
449
|
+
color 300ms var(--ease),
|
|
450
|
+
box-shadow 300ms var(--ease);
|
|
357
451
|
}
|
|
358
452
|
|
|
359
|
-
.
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
gap: 0.125rem;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
.step-copy strong {
|
|
366
|
-
color: inherit;
|
|
367
|
-
font-size: 0.75rem;
|
|
368
|
-
line-height: 1.3;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.step-copy small {
|
|
372
|
-
display: none;
|
|
453
|
+
.steps li em {
|
|
454
|
+
font-style: normal;
|
|
455
|
+
font-weight: 600;
|
|
373
456
|
}
|
|
374
457
|
|
|
375
458
|
.steps li[aria-current="step"] {
|
|
376
|
-
color: var(--
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
.steps li[aria-current="step"] .step-index {
|
|
380
|
-
border-color: var(--signal);
|
|
381
|
-
background: var(--signal);
|
|
382
|
-
color: var(--signal-on);
|
|
459
|
+
color: var(--text);
|
|
383
460
|
}
|
|
384
461
|
|
|
385
|
-
.steps li
|
|
386
|
-
border-color: var(--
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
.steps li.complete::before,
|
|
392
|
-
.steps li[aria-current="step"]::before {
|
|
393
|
-
background: var(--signal);
|
|
462
|
+
.steps li[aria-current="step"] span {
|
|
463
|
+
border-color: var(--accent);
|
|
464
|
+
color: #fff;
|
|
465
|
+
background: var(--accent);
|
|
466
|
+
box-shadow: 0 0 0 5px rgb(19 124 116 / 15%);
|
|
394
467
|
}
|
|
395
468
|
|
|
396
|
-
.
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
469
|
+
.steps li.complete span {
|
|
470
|
+
border-color: var(--accent);
|
|
471
|
+
color: transparent;
|
|
472
|
+
background: var(--accent);
|
|
400
473
|
}
|
|
401
474
|
|
|
402
|
-
.
|
|
403
|
-
|
|
404
|
-
color:
|
|
475
|
+
.steps li.complete span::after {
|
|
476
|
+
position: absolute;
|
|
477
|
+
color: #fff;
|
|
405
478
|
font-size: 0.8125rem;
|
|
406
|
-
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
/* Current work */
|
|
410
|
-
|
|
411
|
-
.work-column {
|
|
412
|
-
min-width: 0;
|
|
413
|
-
scroll-margin-block-start: 5.5rem;
|
|
479
|
+
content: "✓";
|
|
414
480
|
}
|
|
415
481
|
|
|
416
|
-
.
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
gap: 0.625rem;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.preview-badge {
|
|
423
|
-
margin: 0;
|
|
424
|
-
padding: 0.625rem 1rem;
|
|
425
|
-
border: 1px solid var(--line-strong);
|
|
426
|
-
border-radius: var(--radius);
|
|
427
|
-
display: flex;
|
|
428
|
-
align-items: baseline;
|
|
429
|
-
justify-content: space-between;
|
|
430
|
-
gap: 0.75rem 1rem;
|
|
431
|
-
background: var(--surface-muted);
|
|
432
|
-
color: var(--ink);
|
|
433
|
-
font-size: 0.8125rem;
|
|
482
|
+
.steps li.complete::before,
|
|
483
|
+
.steps li[aria-current="step"]::before {
|
|
484
|
+
background: var(--accent);
|
|
434
485
|
}
|
|
435
486
|
|
|
436
|
-
|
|
437
|
-
color: var(--ink-soft);
|
|
438
|
-
text-align: end;
|
|
439
|
-
}
|
|
487
|
+
/* ---------- Global messages ---------- */
|
|
440
488
|
|
|
441
489
|
.message,
|
|
442
490
|
.error {
|
|
443
|
-
min-height: 2.875rem;
|
|
444
|
-
margin: 0;
|
|
445
|
-
padding: 0.75rem 1rem;
|
|
446
|
-
border-radius: var(--radius);
|
|
447
491
|
display: flex;
|
|
448
492
|
align-items: center;
|
|
449
493
|
gap: 0.625rem;
|
|
494
|
+
min-height: 2.875rem;
|
|
495
|
+
margin: 1rem 0;
|
|
496
|
+
padding: 0.75rem 1rem;
|
|
497
|
+
border-radius: var(--radius-sm);
|
|
450
498
|
font-size: 0.9375rem;
|
|
451
499
|
}
|
|
452
500
|
|
|
453
501
|
.message {
|
|
454
|
-
border: 1px solid var(--
|
|
502
|
+
border: 1px solid var(--border);
|
|
503
|
+
color: var(--text-muted);
|
|
455
504
|
background: var(--surface);
|
|
456
|
-
|
|
505
|
+
box-shadow: var(--shadow-sm);
|
|
457
506
|
}
|
|
458
507
|
|
|
459
508
|
.message::before {
|
|
460
|
-
width: 0.5rem;
|
|
461
|
-
height: 0.5rem;
|
|
462
509
|
flex: 0 0 auto;
|
|
510
|
+
width: 0.4375rem;
|
|
511
|
+
height: 0.4375rem;
|
|
463
512
|
border-radius: 50%;
|
|
464
|
-
background: var(--
|
|
513
|
+
background: var(--accent-bright);
|
|
465
514
|
content: "";
|
|
466
515
|
}
|
|
467
516
|
|
|
468
517
|
.error {
|
|
469
|
-
border: 1px solid var(--danger-
|
|
470
|
-
background: var(--danger-soft);
|
|
518
|
+
border: 1px solid var(--danger-border);
|
|
471
519
|
color: var(--danger);
|
|
520
|
+
background: var(--danger-soft);
|
|
472
521
|
font-weight: 650;
|
|
522
|
+
animation: shake 320ms var(--ease);
|
|
473
523
|
}
|
|
474
524
|
|
|
525
|
+
/* ---------- Panels ---------- */
|
|
526
|
+
|
|
475
527
|
.panel {
|
|
476
|
-
padding: clamp(1.
|
|
477
|
-
border: 1px solid var(--
|
|
528
|
+
padding: clamp(1.5rem, 4vw, 2.25rem);
|
|
529
|
+
border: 1px solid var(--border);
|
|
478
530
|
border-radius: var(--radius-lg);
|
|
479
531
|
background: var(--surface);
|
|
480
|
-
box-shadow: var(--shadow);
|
|
481
|
-
animation: panel-in
|
|
532
|
+
box-shadow: var(--shadow-md);
|
|
533
|
+
animation: panel-in 380ms var(--ease);
|
|
482
534
|
}
|
|
483
535
|
|
|
484
536
|
.panel-heading {
|
|
485
|
-
margin-
|
|
486
|
-
display: grid;
|
|
487
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
488
|
-
align-items: baseline;
|
|
489
|
-
gap: 0.5rem 1rem;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
.panel-heading h2,
|
|
493
|
-
.panel-heading p {
|
|
494
|
-
margin: 0;
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
.panel-heading h2 {
|
|
498
|
-
max-width: 27ch;
|
|
499
|
-
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
500
|
-
line-height: 1.08;
|
|
501
|
-
letter-spacing: -0.03em;
|
|
502
|
-
text-wrap: balance;
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
.panel-heading > span {
|
|
506
|
-
color: var(--ink-soft);
|
|
507
|
-
font-family: "Relmio Geist", sans-serif;
|
|
508
|
-
font-size: 0.75rem;
|
|
509
|
-
font-variant-numeric: tabular-nums;
|
|
510
|
-
font-weight: 650;
|
|
511
|
-
white-space: nowrap;
|
|
537
|
+
margin-bottom: 1.5rem;
|
|
512
538
|
}
|
|
513
539
|
|
|
514
540
|
.panel-heading p {
|
|
515
|
-
max-width:
|
|
516
|
-
|
|
517
|
-
color: var(--ink-soft);
|
|
518
|
-
line-height: 1.65;
|
|
541
|
+
max-width: 42rem;
|
|
542
|
+
margin-bottom: 0;
|
|
519
543
|
}
|
|
520
544
|
|
|
521
545
|
.status-row {
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
display: grid;
|
|
525
|
-
grid-template-columns: auto minmax(0, 1fr);
|
|
526
|
-
align-items: start;
|
|
546
|
+
display: flex;
|
|
547
|
+
align-items: flex-start;
|
|
527
548
|
gap: 0.875rem;
|
|
549
|
+
padding: 1rem 1.125rem;
|
|
550
|
+
border: 1px solid var(--border);
|
|
551
|
+
border-radius: var(--radius);
|
|
528
552
|
background: var(--surface-muted);
|
|
529
553
|
}
|
|
530
554
|
|
|
531
|
-
.status-row > span:last-child {
|
|
532
|
-
min-width: 0;
|
|
533
|
-
}
|
|
534
|
-
|
|
535
555
|
.status-row p {
|
|
536
556
|
margin: 0.25rem 0 0;
|
|
537
|
-
color: var(--
|
|
557
|
+
color: var(--text-muted);
|
|
538
558
|
}
|
|
539
559
|
|
|
540
560
|
.status-row .credential-time {
|
|
541
|
-
color: var(--
|
|
561
|
+
color: var(--text);
|
|
542
562
|
font-size: 0.875rem;
|
|
543
|
-
font-weight:
|
|
563
|
+
font-weight: 700;
|
|
544
564
|
}
|
|
545
565
|
|
|
546
566
|
.status-dot {
|
|
567
|
+
flex: 0 0 auto;
|
|
547
568
|
width: 0.75rem;
|
|
548
569
|
height: 0.75rem;
|
|
549
|
-
margin-
|
|
550
|
-
border: 2px solid var(--
|
|
570
|
+
margin-top: 0.375rem;
|
|
571
|
+
border: 2px solid var(--border-strong);
|
|
551
572
|
border-radius: 50%;
|
|
552
|
-
background: var(--surface);
|
|
553
573
|
transition:
|
|
554
|
-
border-color
|
|
555
|
-
background
|
|
574
|
+
border-color 300ms var(--ease),
|
|
575
|
+
background 300ms var(--ease),
|
|
576
|
+
box-shadow 300ms var(--ease);
|
|
556
577
|
}
|
|
557
578
|
|
|
558
579
|
.status-dot.ready {
|
|
559
580
|
border-color: var(--success);
|
|
560
581
|
background: var(--success);
|
|
582
|
+
box-shadow: 0 0 0 4px rgb(23 101 63 / 14%);
|
|
561
583
|
}
|
|
562
584
|
|
|
563
|
-
/* Fields */
|
|
585
|
+
/* ---------- Fields ---------- */
|
|
564
586
|
|
|
565
587
|
.field-grid {
|
|
566
588
|
display: grid;
|
|
567
|
-
grid-template-columns: minmax(0, 2fr) minmax(
|
|
568
|
-
gap:
|
|
569
|
-
margin-
|
|
589
|
+
grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr);
|
|
590
|
+
gap: 1rem;
|
|
591
|
+
margin-bottom: 1rem;
|
|
570
592
|
}
|
|
571
593
|
|
|
572
594
|
.field-grid.single {
|
|
@@ -574,108 +596,120 @@ a:focus-visible,
|
|
|
574
596
|
}
|
|
575
597
|
|
|
576
598
|
.field {
|
|
577
|
-
min-width: 0;
|
|
578
599
|
display: grid;
|
|
579
600
|
align-content: start;
|
|
580
|
-
gap: 0.
|
|
581
|
-
font-weight:
|
|
601
|
+
gap: 0.4375rem;
|
|
602
|
+
font-weight: 700;
|
|
582
603
|
}
|
|
583
604
|
|
|
584
605
|
.field input,
|
|
585
606
|
.field select {
|
|
586
607
|
width: 100%;
|
|
587
608
|
min-height: 2.875rem;
|
|
588
|
-
padding: 0.625rem 0.
|
|
589
|
-
border: 1px solid var(--
|
|
609
|
+
padding: 0.625rem 0.875rem;
|
|
610
|
+
border: 1px solid var(--border-strong);
|
|
590
611
|
border-radius: var(--radius-sm);
|
|
591
|
-
|
|
592
|
-
|
|
612
|
+
color: var(--text);
|
|
613
|
+
background: var(--surface);
|
|
593
614
|
transition:
|
|
594
|
-
border-color
|
|
595
|
-
box-shadow
|
|
615
|
+
border-color 200ms var(--ease),
|
|
616
|
+
box-shadow 200ms var(--ease),
|
|
617
|
+
background 200ms var(--ease);
|
|
596
618
|
}
|
|
597
619
|
|
|
598
620
|
.field select {
|
|
599
|
-
|
|
621
|
+
appearance: none;
|
|
622
|
+
padding-right: 2.25rem;
|
|
623
|
+
background-image:
|
|
624
|
+
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
|
|
625
|
+
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
|
|
626
|
+
background-position:
|
|
627
|
+
calc(100% - 1.125rem) 50%,
|
|
628
|
+
calc(100% - 0.8125rem) 50%;
|
|
629
|
+
background-size:
|
|
630
|
+
0.3125rem 0.3125rem,
|
|
631
|
+
0.3125rem 0.3125rem;
|
|
632
|
+
background-repeat: no-repeat;
|
|
600
633
|
}
|
|
601
634
|
|
|
602
635
|
.field input:hover,
|
|
603
636
|
.field select:hover {
|
|
604
|
-
border-color: var(--
|
|
637
|
+
border-color: var(--accent);
|
|
605
638
|
}
|
|
606
639
|
|
|
607
640
|
.field input:focus,
|
|
608
641
|
.field select:focus {
|
|
609
|
-
border-color: var(--
|
|
642
|
+
border-color: var(--accent);
|
|
610
643
|
outline: 0;
|
|
611
|
-
box-shadow: 0 0 0
|
|
644
|
+
box-shadow: 0 0 0 4px rgb(19 124 116 / 13%);
|
|
612
645
|
}
|
|
613
646
|
|
|
614
647
|
.field input:disabled {
|
|
648
|
+
color: var(--text-muted);
|
|
615
649
|
background: var(--surface-muted);
|
|
616
|
-
color: var(--ink-soft);
|
|
617
650
|
cursor: not-allowed;
|
|
618
651
|
}
|
|
619
652
|
|
|
620
653
|
.field small {
|
|
621
|
-
color: var(--
|
|
654
|
+
color: var(--text-muted);
|
|
622
655
|
font-size: 0.75rem;
|
|
623
656
|
font-weight: 450;
|
|
624
|
-
line-height: 1.5;
|
|
625
657
|
}
|
|
626
658
|
|
|
627
659
|
code {
|
|
628
|
-
padding: 0.
|
|
660
|
+
padding: 0.1rem 0.3rem;
|
|
629
661
|
border-radius: 0.25rem;
|
|
630
|
-
background:
|
|
631
|
-
font-family:
|
|
662
|
+
background: var(--surface-muted);
|
|
663
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
632
664
|
font-size: 0.875em;
|
|
633
665
|
overflow-wrap: anywhere;
|
|
634
666
|
}
|
|
635
667
|
|
|
636
|
-
/* Buttons */
|
|
668
|
+
/* ---------- Buttons ---------- */
|
|
637
669
|
|
|
638
670
|
.actions {
|
|
639
|
-
margin-block-start: 1.75rem;
|
|
640
671
|
display: flex;
|
|
641
672
|
flex-wrap: wrap;
|
|
642
673
|
justify-content: flex-end;
|
|
643
674
|
gap: 0.75rem;
|
|
675
|
+
margin-top: 1.75rem;
|
|
644
676
|
}
|
|
645
677
|
|
|
646
678
|
.button {
|
|
647
|
-
|
|
648
|
-
padding: 0.625rem 1rem;
|
|
649
|
-
border: 1px solid transparent;
|
|
650
|
-
border-radius: var(--radius);
|
|
679
|
+
position: relative;
|
|
651
680
|
display: inline-flex;
|
|
652
681
|
align-items: center;
|
|
653
682
|
justify-content: center;
|
|
654
683
|
gap: 0.5rem;
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
684
|
+
min-height: 2.875rem;
|
|
685
|
+
padding: 0.625rem 1.125rem;
|
|
686
|
+
border: 1px solid transparent;
|
|
687
|
+
border-radius: 0.625rem;
|
|
688
|
+
font-weight: 750;
|
|
689
|
+
box-shadow: var(--shadow-sm);
|
|
659
690
|
cursor: pointer;
|
|
660
691
|
transition:
|
|
661
|
-
transform
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
color
|
|
665
|
-
|
|
692
|
+
transform 200ms var(--ease),
|
|
693
|
+
box-shadow 200ms var(--ease),
|
|
694
|
+
background 200ms var(--ease),
|
|
695
|
+
color 200ms var(--ease),
|
|
696
|
+
border-color 200ms var(--ease),
|
|
697
|
+
opacity 200ms var(--ease);
|
|
666
698
|
}
|
|
667
699
|
|
|
668
700
|
.button:not(:disabled):hover {
|
|
669
|
-
transform: translateY(-
|
|
701
|
+
transform: translateY(-1px);
|
|
702
|
+
box-shadow: var(--shadow-md);
|
|
670
703
|
}
|
|
671
704
|
|
|
672
705
|
.button:not(:disabled):active {
|
|
673
|
-
transform: translateY(0);
|
|
706
|
+
transform: translateY(0) scale(0.98);
|
|
707
|
+
box-shadow: var(--shadow-sm);
|
|
674
708
|
}
|
|
675
709
|
|
|
676
710
|
.button:disabled {
|
|
677
711
|
cursor: not-allowed;
|
|
678
|
-
opacity: 0.
|
|
712
|
+
opacity: 0.48;
|
|
679
713
|
}
|
|
680
714
|
|
|
681
715
|
.button[aria-busy="true"] {
|
|
@@ -683,81 +717,84 @@ code {
|
|
|
683
717
|
}
|
|
684
718
|
|
|
685
719
|
.button[aria-busy="true"]::after {
|
|
686
|
-
width: 0.
|
|
687
|
-
height: 0.
|
|
720
|
+
width: 0.9375rem;
|
|
721
|
+
height: 0.9375rem;
|
|
688
722
|
flex: 0 0 auto;
|
|
689
723
|
border: 2px solid currentcolor;
|
|
690
|
-
border-
|
|
724
|
+
border-top-color: transparent;
|
|
691
725
|
border-radius: 50%;
|
|
692
726
|
content: "";
|
|
693
727
|
animation: spin 700ms linear infinite;
|
|
694
728
|
}
|
|
695
729
|
|
|
696
730
|
.button.primary {
|
|
697
|
-
|
|
698
|
-
|
|
731
|
+
color: #fff;
|
|
732
|
+
background: var(--accent);
|
|
699
733
|
}
|
|
700
734
|
|
|
701
735
|
.button.primary:not(:disabled):hover {
|
|
702
|
-
background: var(--
|
|
736
|
+
background: var(--accent-deep);
|
|
703
737
|
}
|
|
704
738
|
|
|
705
739
|
.button.secondary {
|
|
706
|
-
border-color: var(--
|
|
707
|
-
|
|
708
|
-
|
|
740
|
+
border-color: var(--border-strong);
|
|
741
|
+
color: var(--text);
|
|
742
|
+
background: var(--surface);
|
|
709
743
|
}
|
|
710
744
|
|
|
711
745
|
.button.secondary:not(:disabled):hover,
|
|
712
746
|
.button.ghost:not(:disabled):hover {
|
|
713
|
-
border-color: var(--
|
|
714
|
-
background: var(--
|
|
747
|
+
border-color: var(--accent);
|
|
748
|
+
background: var(--accent-soft);
|
|
715
749
|
}
|
|
716
750
|
|
|
717
751
|
.button.ghost {
|
|
718
|
-
margin-
|
|
752
|
+
margin-right: auto;
|
|
753
|
+
color: var(--text-muted);
|
|
719
754
|
background: transparent;
|
|
720
|
-
|
|
755
|
+
box-shadow: none;
|
|
721
756
|
}
|
|
722
757
|
|
|
723
758
|
.button.copied {
|
|
724
759
|
border-color: var(--success);
|
|
725
|
-
background: var(--success-soft);
|
|
726
760
|
color: var(--success);
|
|
761
|
+
background: color-mix(in srgb, var(--success) 12%, var(--surface));
|
|
727
762
|
}
|
|
728
763
|
|
|
729
|
-
/*
|
|
764
|
+
/* ---------- Fingerprint & approvals ---------- */
|
|
730
765
|
|
|
731
766
|
.fingerprint {
|
|
732
|
-
margin-
|
|
733
|
-
padding:
|
|
734
|
-
border: 1px solid var(--warning-
|
|
767
|
+
margin-top: 1rem;
|
|
768
|
+
padding: 1.125rem;
|
|
769
|
+
border: 1px solid var(--warning-border);
|
|
735
770
|
border-radius: var(--radius);
|
|
736
771
|
background: var(--warning-soft);
|
|
772
|
+
animation: panel-in 320ms var(--ease);
|
|
737
773
|
}
|
|
738
774
|
|
|
739
775
|
.fingerprint > span {
|
|
740
776
|
display: block;
|
|
741
|
-
margin-
|
|
777
|
+
margin-bottom: 0.375rem;
|
|
742
778
|
color: var(--warning);
|
|
743
779
|
font-size: 0.75rem;
|
|
744
|
-
font-weight:
|
|
780
|
+
font-weight: 800;
|
|
781
|
+
text-transform: uppercase;
|
|
745
782
|
}
|
|
746
783
|
|
|
747
784
|
.fingerprint > code {
|
|
748
785
|
display: block;
|
|
749
|
-
margin-
|
|
786
|
+
margin-bottom: 1rem;
|
|
750
787
|
padding: 0.625rem 0.75rem;
|
|
751
|
-
border: 1px solid var(--warning-
|
|
788
|
+
border: 1px solid var(--warning-border);
|
|
752
789
|
border-radius: var(--radius-sm);
|
|
753
790
|
background: var(--surface);
|
|
754
791
|
}
|
|
755
792
|
|
|
756
793
|
.check-row {
|
|
757
794
|
display: grid;
|
|
758
|
-
grid-template-columns: 1.25rem
|
|
759
|
-
align-items: start;
|
|
795
|
+
grid-template-columns: 1.25rem 1fr;
|
|
760
796
|
gap: 0.625rem;
|
|
797
|
+
align-items: start;
|
|
761
798
|
font-weight: 600;
|
|
762
799
|
cursor: pointer;
|
|
763
800
|
}
|
|
@@ -766,58 +803,59 @@ code {
|
|
|
766
803
|
width: 1.125rem;
|
|
767
804
|
height: 1.125rem;
|
|
768
805
|
margin: 0.2rem 0 0;
|
|
769
|
-
accent-color: var(--
|
|
806
|
+
accent-color: var(--accent);
|
|
770
807
|
cursor: pointer;
|
|
771
808
|
}
|
|
772
809
|
|
|
773
810
|
.version-strip {
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
811
|
+
display: flex;
|
|
812
|
+
flex-wrap: wrap;
|
|
813
|
+
gap: 0.625rem;
|
|
814
|
+
margin-bottom: 1.25rem;
|
|
778
815
|
}
|
|
779
816
|
|
|
780
817
|
.version-strip span {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
border-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
.version-strip strong {
|
|
790
|
-
color: var(--ink);
|
|
818
|
+
display: inline-flex;
|
|
819
|
+
align-items: center;
|
|
820
|
+
gap: 0.375rem;
|
|
821
|
+
padding: 0.4375rem 0.75rem;
|
|
822
|
+
border: 1px solid var(--border);
|
|
823
|
+
border-radius: 999px;
|
|
824
|
+
background: var(--surface-muted);
|
|
825
|
+
font-size: 0.8125rem;
|
|
791
826
|
}
|
|
792
827
|
|
|
793
|
-
/*
|
|
828
|
+
/* ---------- Review ---------- */
|
|
794
829
|
|
|
795
830
|
.review-grid {
|
|
796
|
-
|
|
831
|
+
display: grid;
|
|
832
|
+
grid-template-columns: 1fr 1fr;
|
|
833
|
+
gap: 1rem;
|
|
797
834
|
}
|
|
798
835
|
|
|
799
836
|
.review-grid section {
|
|
800
|
-
padding
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
837
|
+
padding: 1.125rem;
|
|
838
|
+
border: 1px solid var(--border);
|
|
839
|
+
border-radius: var(--radius);
|
|
840
|
+
background: var(--surface-muted);
|
|
804
841
|
}
|
|
805
842
|
|
|
806
|
-
.review-grid section
|
|
807
|
-
border-
|
|
843
|
+
.review-grid section:first-child {
|
|
844
|
+
border-color: var(--accent-border);
|
|
845
|
+
background: var(--accent-soft);
|
|
808
846
|
}
|
|
809
847
|
|
|
810
|
-
.review-grid
|
|
811
|
-
|
|
812
|
-
|
|
848
|
+
.review-grid section:last-child {
|
|
849
|
+
border-color: var(--danger-border);
|
|
850
|
+
background: var(--danger-soft);
|
|
813
851
|
}
|
|
814
852
|
|
|
815
853
|
.check-list,
|
|
816
854
|
.no-list {
|
|
817
|
-
margin: 0;
|
|
818
|
-
padding-inline-start: 1.25rem;
|
|
819
855
|
display: grid;
|
|
820
856
|
gap: 0.625rem;
|
|
857
|
+
margin: 0;
|
|
858
|
+
padding-left: 1.25rem;
|
|
821
859
|
}
|
|
822
860
|
|
|
823
861
|
.check-list li::marker {
|
|
@@ -829,62 +867,54 @@ code {
|
|
|
829
867
|
}
|
|
830
868
|
|
|
831
869
|
.approval {
|
|
832
|
-
margin-
|
|
833
|
-
padding: 1rem;
|
|
834
|
-
border: 1px solid var(--warning-
|
|
870
|
+
margin-top: 1rem;
|
|
871
|
+
padding: 1rem 1.125rem;
|
|
872
|
+
border: 1px solid var(--warning-border);
|
|
835
873
|
border-radius: var(--radius);
|
|
836
874
|
background: var(--warning-soft);
|
|
837
875
|
}
|
|
838
876
|
|
|
839
|
-
/*
|
|
877
|
+
/* ---------- Success ---------- */
|
|
878
|
+
|
|
879
|
+
.success-panel {
|
|
880
|
+
position: relative;
|
|
881
|
+
}
|
|
840
882
|
|
|
841
883
|
.success-mark {
|
|
884
|
+
display: grid;
|
|
842
885
|
width: 3.25rem;
|
|
843
886
|
height: 3.25rem;
|
|
844
|
-
margin-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
.success-mark path {
|
|
855
|
-
fill: none;
|
|
856
|
-
stroke: var(--success);
|
|
857
|
-
stroke-width: 2.25;
|
|
858
|
-
stroke-linecap: round;
|
|
859
|
-
stroke-linejoin: round;
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
.success-panel > h3 {
|
|
863
|
-
margin-block: 0 0.75rem;
|
|
887
|
+
margin-bottom: 1.25rem;
|
|
888
|
+
place-items: center;
|
|
889
|
+
border-radius: 50%;
|
|
890
|
+
color: #fff;
|
|
891
|
+
background: linear-gradient(140deg, #1d8a5f, var(--success));
|
|
892
|
+
box-shadow: 0 0 0 6px rgb(23 101 63 / 14%);
|
|
893
|
+
font-size: 1.5rem;
|
|
894
|
+
font-weight: 900;
|
|
895
|
+
animation: pop-in 480ms var(--ease);
|
|
864
896
|
}
|
|
865
897
|
|
|
866
898
|
.result-list {
|
|
867
|
-
|
|
868
|
-
border-block-start: 1px solid var(--line);
|
|
899
|
+
border-top: 1px solid var(--border);
|
|
869
900
|
}
|
|
870
901
|
|
|
871
|
-
.result-list
|
|
872
|
-
padding-block: 0.875rem;
|
|
873
|
-
border-block-end: 1px solid var(--line);
|
|
902
|
+
.result-list div {
|
|
874
903
|
display: grid;
|
|
875
|
-
grid-template-columns: 9rem
|
|
876
|
-
align-items: center;
|
|
904
|
+
grid-template-columns: 9rem 1fr;
|
|
877
905
|
gap: 1rem;
|
|
906
|
+
align-items: center;
|
|
907
|
+
padding: 0.875rem 0;
|
|
908
|
+
border-bottom: 1px solid var(--border);
|
|
878
909
|
}
|
|
879
910
|
|
|
880
911
|
.result-list dt {
|
|
881
|
-
color: var(--
|
|
912
|
+
color: var(--text-muted);
|
|
882
913
|
}
|
|
883
914
|
|
|
884
915
|
.result-list dd {
|
|
885
|
-
min-width: 0;
|
|
886
916
|
margin: 0;
|
|
887
|
-
font-weight:
|
|
917
|
+
font-weight: 700;
|
|
888
918
|
}
|
|
889
919
|
|
|
890
920
|
.result-list dd.result-value {
|
|
@@ -896,290 +926,173 @@ code {
|
|
|
896
926
|
}
|
|
897
927
|
|
|
898
928
|
.copy-value {
|
|
899
|
-
min-height: 2.
|
|
900
|
-
padding: 0.
|
|
929
|
+
min-height: 2.125rem;
|
|
930
|
+
padding: 0.3125rem 0.75rem;
|
|
931
|
+
border-radius: 0.5rem;
|
|
901
932
|
font-size: 0.8125rem;
|
|
902
933
|
}
|
|
903
934
|
|
|
904
935
|
.model-box,
|
|
905
936
|
.final-note {
|
|
906
|
-
margin-
|
|
907
|
-
padding
|
|
908
|
-
border
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
.model-box h3 {
|
|
912
|
-
margin-block: 0 0.75rem;
|
|
937
|
+
margin-top: 1.5rem;
|
|
938
|
+
padding: 1.125rem;
|
|
939
|
+
border: 1px solid var(--border);
|
|
940
|
+
border-radius: var(--radius);
|
|
941
|
+
background: var(--surface-muted);
|
|
913
942
|
}
|
|
914
943
|
|
|
915
944
|
.model-box p,
|
|
916
945
|
.final-note {
|
|
917
|
-
|
|
918
|
-
line-height: 1.6;
|
|
946
|
+
margin-bottom: 0;
|
|
919
947
|
}
|
|
920
948
|
|
|
921
|
-
.model-box p
|
|
922
|
-
|
|
923
|
-
margin-block-end: 0;
|
|
949
|
+
.model-box p {
|
|
950
|
+
color: var(--text-muted);
|
|
924
951
|
}
|
|
925
952
|
|
|
926
|
-
|
|
927
|
-
padding
|
|
928
|
-
border-
|
|
929
|
-
color: var(--
|
|
953
|
+
footer {
|
|
954
|
+
padding: 1.5rem 1rem;
|
|
955
|
+
border-top: 1px solid var(--border);
|
|
956
|
+
color: var(--text-muted);
|
|
957
|
+
background: var(--surface);
|
|
930
958
|
font-size: 0.8125rem;
|
|
931
959
|
text-align: center;
|
|
932
960
|
}
|
|
933
961
|
|
|
934
|
-
|
|
962
|
+
footer p {
|
|
935
963
|
margin: 0;
|
|
936
964
|
}
|
|
937
965
|
|
|
938
|
-
/*
|
|
939
|
-
|
|
940
|
-
@media (min-width: 60rem) {
|
|
941
|
-
.wizard-shell {
|
|
942
|
-
padding-block-start: clamp(2rem, 4vw, 3rem);
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
.wizard-intro {
|
|
946
|
-
max-width: none;
|
|
947
|
-
display: grid;
|
|
948
|
-
grid-template-columns: minmax(22rem, 0.75fr) minmax(30rem, 1.25fr);
|
|
949
|
-
align-items: start;
|
|
950
|
-
gap: 1rem clamp(2rem, 5vw, 4rem);
|
|
951
|
-
}
|
|
952
|
-
|
|
953
|
-
.wizard-intro h1 {
|
|
954
|
-
grid-column: 1;
|
|
955
|
-
grid-row: 1 / span 2;
|
|
956
|
-
font-size: clamp(3rem, 5vw, 4.25rem);
|
|
957
|
-
}
|
|
958
|
-
|
|
959
|
-
.wizard-intro > p,
|
|
960
|
-
.wizard-intro .intro-ledger {
|
|
961
|
-
grid-column: 2;
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
.wizard-intro > p {
|
|
965
|
-
margin-block-start: 0;
|
|
966
|
-
}
|
|
966
|
+
/* ---------- Dark mode refinement ---------- */
|
|
967
967
|
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
margin-block-start: clamp(1.75rem, 4vw, 3rem);
|
|
974
|
-
grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 1fr);
|
|
975
|
-
align-items: start;
|
|
976
|
-
gap: clamp(2rem, 5vw, 4rem);
|
|
977
|
-
}
|
|
968
|
+
:root[data-theme="dark"] .brand-mark {
|
|
969
|
+
padding: 0.125rem;
|
|
970
|
+
background: #f7f8f5;
|
|
971
|
+
box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
|
|
972
|
+
}
|
|
978
973
|
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
974
|
+
:root[data-theme="dark"] .eyebrow,
|
|
975
|
+
:root[data-theme="dark"] .step-kicker {
|
|
976
|
+
color: var(--accent-bright);
|
|
977
|
+
}
|
|
983
978
|
|
|
984
|
-
|
|
985
|
-
|
|
979
|
+
@media (prefers-color-scheme: dark) {
|
|
980
|
+
:root:not([data-theme]) .brand-mark {
|
|
981
|
+
padding: 0.125rem;
|
|
982
|
+
background: #f7f8f5;
|
|
983
|
+
box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
|
|
986
984
|
}
|
|
987
985
|
|
|
988
|
-
.
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
align-items: start;
|
|
992
|
-
justify-items: start;
|
|
993
|
-
gap: 0.875rem;
|
|
994
|
-
text-align: start;
|
|
986
|
+
:root:not([data-theme]) .eyebrow,
|
|
987
|
+
:root:not([data-theme]) .step-kicker {
|
|
988
|
+
color: var(--accent-bright);
|
|
995
989
|
}
|
|
990
|
+
}
|
|
996
991
|
|
|
997
|
-
|
|
998
|
-
inset-block-start: auto;
|
|
999
|
-
inset-block-end: calc(100% - 1rem);
|
|
1000
|
-
inset-inline-start: 0.9375rem;
|
|
1001
|
-
width: 1px;
|
|
1002
|
-
height: 100%;
|
|
1003
|
-
}
|
|
992
|
+
/* ---------- Animations ---------- */
|
|
1004
993
|
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
.step-copy strong {
|
|
1010
|
-
font-size: 0.875rem;
|
|
994
|
+
@keyframes panel-in {
|
|
995
|
+
from {
|
|
996
|
+
opacity: 0;
|
|
997
|
+
transform: translateY(14px);
|
|
1011
998
|
}
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
color: var(--ink-soft);
|
|
1016
|
-
font-size: 0.75rem;
|
|
999
|
+
to {
|
|
1000
|
+
opacity: 1;
|
|
1001
|
+
transform: translateY(0);
|
|
1017
1002
|
}
|
|
1018
1003
|
}
|
|
1019
1004
|
|
|
1020
|
-
@
|
|
1021
|
-
|
|
1022
|
-
|
|
1005
|
+
@keyframes pop-in {
|
|
1006
|
+
0% {
|
|
1007
|
+
opacity: 0;
|
|
1008
|
+
transform: scale(0.5);
|
|
1023
1009
|
}
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
.review-grid section {
|
|
1027
|
-
grid-template-columns: 1fr;
|
|
1010
|
+
70% {
|
|
1011
|
+
transform: scale(1.08);
|
|
1028
1012
|
}
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1013
|
+
100% {
|
|
1014
|
+
opacity: 1;
|
|
1015
|
+
transform: scale(1);
|
|
1032
1016
|
}
|
|
1017
|
+
}
|
|
1033
1018
|
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1019
|
+
@keyframes shake {
|
|
1020
|
+
0%,
|
|
1021
|
+
100% {
|
|
1022
|
+
transform: translateX(0);
|
|
1037
1023
|
}
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
margin-block-start: 1.25rem;
|
|
1024
|
+
25% {
|
|
1025
|
+
transform: translateX(-4px);
|
|
1041
1026
|
}
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
.intro-ledger > span:first-child {
|
|
1045
|
-
padding: 0.75rem 0.5rem;
|
|
1027
|
+
75% {
|
|
1028
|
+
transform: translateX(4px);
|
|
1046
1029
|
}
|
|
1030
|
+
}
|
|
1047
1031
|
|
|
1048
|
-
|
|
1049
|
-
|
|
1032
|
+
@keyframes spin {
|
|
1033
|
+
to {
|
|
1034
|
+
transform: rotate(360deg);
|
|
1050
1035
|
}
|
|
1036
|
+
}
|
|
1051
1037
|
|
|
1052
|
-
|
|
1053
|
-
font-size: 0.75rem;
|
|
1054
|
-
line-height: 1.25;
|
|
1055
|
-
}
|
|
1038
|
+
/* ---------- Responsive ---------- */
|
|
1056
1039
|
|
|
1057
|
-
|
|
1040
|
+
@media (max-width: 42rem) {
|
|
1041
|
+
.local-badge {
|
|
1058
1042
|
display: none;
|
|
1059
1043
|
}
|
|
1060
1044
|
|
|
1061
|
-
.
|
|
1062
|
-
|
|
1063
|
-
gap: 0.875rem;
|
|
1045
|
+
.site-header {
|
|
1046
|
+
padding-inline: 1rem;
|
|
1064
1047
|
}
|
|
1065
1048
|
|
|
1066
|
-
.
|
|
1067
|
-
|
|
1068
|
-
display: none;
|
|
1049
|
+
.header-actions {
|
|
1050
|
+
gap: 0.375rem;
|
|
1069
1051
|
}
|
|
1070
1052
|
|
|
1071
|
-
.
|
|
1072
|
-
padding: 0.
|
|
1053
|
+
.theme-picker span {
|
|
1054
|
+
padding-inline: 0.5rem;
|
|
1073
1055
|
}
|
|
1074
1056
|
|
|
1075
|
-
.
|
|
1076
|
-
|
|
1077
|
-
|
|
1057
|
+
.shell {
|
|
1058
|
+
width: min(100% - 1rem, 54rem);
|
|
1059
|
+
padding-top: 2rem;
|
|
1078
1060
|
}
|
|
1079
1061
|
|
|
1080
|
-
.
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1062
|
+
.safety-note,
|
|
1063
|
+
.field-grid,
|
|
1064
|
+
.review-grid {
|
|
1065
|
+
grid-template-columns: 1fr;
|
|
1084
1066
|
}
|
|
1085
1067
|
|
|
1086
|
-
.
|
|
1087
|
-
|
|
1068
|
+
.safety-note::before {
|
|
1069
|
+
grid-row: auto;
|
|
1088
1070
|
}
|
|
1089
1071
|
|
|
1090
|
-
.
|
|
1091
|
-
|
|
1072
|
+
.steps li em {
|
|
1073
|
+
font-size: 0.6875rem;
|
|
1092
1074
|
}
|
|
1093
1075
|
|
|
1094
|
-
.panel
|
|
1095
|
-
|
|
1076
|
+
.panel {
|
|
1077
|
+
border-radius: var(--radius);
|
|
1096
1078
|
}
|
|
1097
1079
|
|
|
1098
1080
|
.actions {
|
|
1099
|
-
align-items: stretch;
|
|
1100
1081
|
flex-direction: column-reverse;
|
|
1101
1082
|
}
|
|
1102
1083
|
|
|
1103
1084
|
.button,
|
|
1104
1085
|
.button.ghost {
|
|
1105
1086
|
width: 100%;
|
|
1106
|
-
margin-
|
|
1107
|
-
}
|
|
1108
|
-
|
|
1109
|
-
.review-grid section {
|
|
1110
|
-
gap: 0.75rem;
|
|
1087
|
+
margin-right: 0;
|
|
1111
1088
|
}
|
|
1112
1089
|
|
|
1113
|
-
.result-list
|
|
1090
|
+
.result-list div {
|
|
1114
1091
|
grid-template-columns: 1fr;
|
|
1115
1092
|
gap: 0.25rem;
|
|
1116
1093
|
}
|
|
1117
1094
|
}
|
|
1118
1095
|
|
|
1119
|
-
@media (max-width: 30rem) {
|
|
1120
|
-
.site-header {
|
|
1121
|
-
padding-inline: 0.75rem;
|
|
1122
|
-
}
|
|
1123
|
-
|
|
1124
|
-
.local-badge {
|
|
1125
|
-
max-width: 9rem;
|
|
1126
|
-
line-height: 1.25;
|
|
1127
|
-
text-align: end;
|
|
1128
|
-
}
|
|
1129
|
-
|
|
1130
|
-
.wizard-shell,
|
|
1131
|
-
.site-footer {
|
|
1132
|
-
width: min(calc(100% - 1rem), var(--page));
|
|
1133
|
-
}
|
|
1134
|
-
|
|
1135
|
-
.wizard-intro h1 {
|
|
1136
|
-
font-size: clamp(2.5rem, 14vw, 3.75rem);
|
|
1137
|
-
}
|
|
1138
|
-
|
|
1139
|
-
.route-rail > header,
|
|
1140
|
-
.steps {
|
|
1141
|
-
padding-inline: 0.75rem;
|
|
1142
|
-
}
|
|
1143
|
-
|
|
1144
|
-
.step-copy strong {
|
|
1145
|
-
font-size: 0.6875rem;
|
|
1146
|
-
}
|
|
1147
|
-
|
|
1148
|
-
.rail-boundary {
|
|
1149
|
-
margin-inline: 0.75rem;
|
|
1150
|
-
}
|
|
1151
|
-
|
|
1152
|
-
.panel {
|
|
1153
|
-
padding: 1rem;
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
.version-strip {
|
|
1157
|
-
grid-template-columns: 1fr;
|
|
1158
|
-
}
|
|
1159
|
-
|
|
1160
|
-
.version-strip span + span {
|
|
1161
|
-
border-block-start: 1px solid var(--line);
|
|
1162
|
-
border-inline-start: 0;
|
|
1163
|
-
}
|
|
1164
|
-
}
|
|
1165
|
-
|
|
1166
|
-
@keyframes panel-in {
|
|
1167
|
-
from {
|
|
1168
|
-
opacity: 0.72;
|
|
1169
|
-
transform: translateY(0.75rem);
|
|
1170
|
-
}
|
|
1171
|
-
to {
|
|
1172
|
-
opacity: 1;
|
|
1173
|
-
transform: translateY(0);
|
|
1174
|
-
}
|
|
1175
|
-
}
|
|
1176
|
-
|
|
1177
|
-
@keyframes spin {
|
|
1178
|
-
to {
|
|
1179
|
-
transform: rotate(360deg);
|
|
1180
|
-
}
|
|
1181
|
-
}
|
|
1182
|
-
|
|
1183
1096
|
@media (prefers-reduced-motion: reduce) {
|
|
1184
1097
|
html {
|
|
1185
1098
|
scroll-behavior: auto;
|