relmio 0.2.6 → 0.2.8
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 +31 -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/icons/monitor.svg +6 -0
- package/src/ui/icons/moon.svg +4 -0
- package/src/ui/icons/sun.svg +12 -0
- package/src/ui/index.html +407 -452
- package/src/ui/styles.css +599 -669
- package/src/ui/theme.js +50 -0
- package/src/web/server.js +16 -10
- 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,480 @@ 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: 0;
|
|
205
|
+
border-radius: 999px;
|
|
206
|
+
background: color-mix(in srgb, var(--text) 88%, var(--border));
|
|
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 .theme-icon {
|
|
221
|
+
width: 1.75rem;
|
|
222
|
+
min-height: 1.75rem;
|
|
223
|
+
display: inline-flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
justify-content: center;
|
|
226
|
+
padding: 0;
|
|
227
|
+
border-radius: 999px;
|
|
228
|
+
color: rgb(255 255 255 / 72%);
|
|
229
|
+
transition:
|
|
230
|
+
color 160ms var(--ease),
|
|
231
|
+
background 160ms var(--ease),
|
|
232
|
+
box-shadow 160ms var(--ease);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.theme-picker .theme-icon::before {
|
|
236
|
+
width: 1rem;
|
|
237
|
+
height: 1rem;
|
|
238
|
+
content: "";
|
|
239
|
+
display: block;
|
|
240
|
+
background: currentColor;
|
|
241
|
+
mask: center / contain no-repeat var(--theme-icon);
|
|
242
|
+
-webkit-mask: center / contain no-repeat var(--theme-icon);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.theme-icon-system {
|
|
246
|
+
--theme-icon: url("/icons/monitor.svg");
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.theme-icon-light {
|
|
250
|
+
--theme-icon: url("/icons/sun.svg");
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.theme-icon-dark {
|
|
254
|
+
--theme-icon: url("/icons/moon.svg");
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.theme-picker input:checked + .theme-icon {
|
|
258
|
+
color: var(--text);
|
|
177
259
|
background: var(--surface);
|
|
260
|
+
box-shadow: var(--shadow-sm);
|
|
178
261
|
}
|
|
179
262
|
|
|
180
|
-
.
|
|
181
|
-
|
|
263
|
+
.theme-picker input:focus-visible + .theme-icon {
|
|
264
|
+
outline: 3px solid #f2a94a;
|
|
265
|
+
outline-offset: 2px;
|
|
182
266
|
}
|
|
183
267
|
|
|
184
|
-
.
|
|
185
|
-
|
|
268
|
+
.visually-hidden {
|
|
269
|
+
position: absolute;
|
|
270
|
+
width: 1px;
|
|
271
|
+
height: 1px;
|
|
272
|
+
padding: 0;
|
|
273
|
+
margin: -1px;
|
|
274
|
+
overflow: hidden;
|
|
275
|
+
clip: rect(0 0 0 0);
|
|
276
|
+
white-space: nowrap;
|
|
277
|
+
border: 0;
|
|
186
278
|
}
|
|
187
279
|
|
|
188
280
|
.local-badge {
|
|
189
281
|
display: inline-flex;
|
|
190
282
|
align-items: center;
|
|
191
|
-
gap: 0.
|
|
192
|
-
|
|
193
|
-
|
|
283
|
+
gap: 0.4375rem;
|
|
284
|
+
padding: 0.4375rem 0.75rem;
|
|
285
|
+
border: 1px solid var(--border);
|
|
286
|
+
border-radius: 999px;
|
|
287
|
+
color: var(--text-muted);
|
|
288
|
+
background: var(--surface);
|
|
289
|
+
box-shadow: var(--shadow-sm);
|
|
290
|
+
font-size: 0.75rem;
|
|
194
291
|
font-weight: 650;
|
|
195
292
|
}
|
|
196
293
|
|
|
197
|
-
.local-badge
|
|
198
|
-
width: 0.
|
|
199
|
-
height: 0.
|
|
294
|
+
.local-badge::before {
|
|
295
|
+
width: 0.4375rem;
|
|
296
|
+
height: 0.4375rem;
|
|
200
297
|
border-radius: 50%;
|
|
201
|
-
background: var(--
|
|
298
|
+
background: var(--accent-bright);
|
|
299
|
+
content: "";
|
|
202
300
|
}
|
|
203
301
|
|
|
204
|
-
/*
|
|
302
|
+
/* ---------- Shell & intro ---------- */
|
|
205
303
|
|
|
206
|
-
.
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
304
|
+
.shell {
|
|
305
|
+
width: min(100% - 2rem, 54rem);
|
|
306
|
+
margin: 0 auto;
|
|
307
|
+
padding: 3.5rem 0 5rem;
|
|
210
308
|
}
|
|
211
309
|
|
|
212
|
-
.
|
|
213
|
-
|
|
310
|
+
.intro {
|
|
311
|
+
max-width: 44rem;
|
|
214
312
|
}
|
|
215
313
|
|
|
216
|
-
.
|
|
217
|
-
|
|
314
|
+
.eyebrow,
|
|
315
|
+
.step-kicker {
|
|
316
|
+
margin: 0 0 0.5rem;
|
|
317
|
+
color: var(--accent);
|
|
318
|
+
font-size: 0.75rem;
|
|
319
|
+
font-weight: 800;
|
|
320
|
+
letter-spacing: 0.09em;
|
|
321
|
+
text-transform: uppercase;
|
|
218
322
|
}
|
|
219
323
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
324
|
+
h1,
|
|
325
|
+
h2,
|
|
326
|
+
h3,
|
|
327
|
+
p {
|
|
328
|
+
margin-top: 0;
|
|
223
329
|
}
|
|
224
330
|
|
|
225
|
-
|
|
226
|
-
max-width:
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
331
|
+
h1 {
|
|
332
|
+
max-width: 42rem;
|
|
333
|
+
margin-bottom: 1rem;
|
|
334
|
+
font-size: clamp(2.1rem, 6.5vw, 3.4rem);
|
|
335
|
+
line-height: 1.04;
|
|
336
|
+
letter-spacing: -0.045em;
|
|
231
337
|
}
|
|
232
338
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
line-height: 1.65;
|
|
339
|
+
h2 {
|
|
340
|
+
margin-bottom: 0.5rem;
|
|
341
|
+
font-size: clamp(1.45rem, 4vw, 1.9rem);
|
|
342
|
+
line-height: 1.2;
|
|
343
|
+
letter-spacing: -0.025em;
|
|
239
344
|
}
|
|
240
345
|
|
|
241
|
-
|
|
242
|
-
margin-
|
|
243
|
-
|
|
244
|
-
display: grid;
|
|
245
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
346
|
+
h3 {
|
|
347
|
+
margin-bottom: 0.75rem;
|
|
348
|
+
font-size: 1rem;
|
|
246
349
|
}
|
|
247
350
|
|
|
248
|
-
.
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
gap: 0.25rem;
|
|
351
|
+
.lede,
|
|
352
|
+
.panel-heading p {
|
|
353
|
+
color: var(--text-muted);
|
|
252
354
|
}
|
|
253
355
|
|
|
254
|
-
.
|
|
255
|
-
|
|
356
|
+
.lede {
|
|
357
|
+
max-width: 42rem;
|
|
358
|
+
font-size: 1.0625rem;
|
|
256
359
|
}
|
|
257
360
|
|
|
258
|
-
|
|
259
|
-
border-inline-start: 1px solid var(--line);
|
|
260
|
-
}
|
|
361
|
+
/* ---------- Safety notes ---------- */
|
|
261
362
|
|
|
262
|
-
.
|
|
263
|
-
|
|
264
|
-
|
|
363
|
+
.safety-note {
|
|
364
|
+
position: relative;
|
|
365
|
+
display: grid;
|
|
366
|
+
grid-template-columns: 2.25rem 1fr;
|
|
367
|
+
gap: 0.25rem 0.875rem;
|
|
368
|
+
align-items: start;
|
|
369
|
+
margin: 1.25rem 0 0;
|
|
370
|
+
padding: 1rem 1.125rem;
|
|
371
|
+
border: 1px solid var(--accent-border);
|
|
372
|
+
border-radius: var(--radius);
|
|
373
|
+
background: var(--accent-soft);
|
|
374
|
+
box-shadow: var(--shadow-sm);
|
|
265
375
|
}
|
|
266
376
|
|
|
267
|
-
.
|
|
268
|
-
margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
|
|
377
|
+
.safety-note::before {
|
|
269
378
|
display: grid;
|
|
270
|
-
|
|
379
|
+
width: 2.25rem;
|
|
380
|
+
height: 2.25rem;
|
|
381
|
+
grid-row: span 2;
|
|
382
|
+
place-items: center;
|
|
383
|
+
border-radius: 0.625rem;
|
|
384
|
+
color: var(--accent-deep);
|
|
385
|
+
background: var(--accent-icon);
|
|
386
|
+
font-size: 1rem;
|
|
387
|
+
font-weight: 800;
|
|
388
|
+
content: "✓";
|
|
271
389
|
}
|
|
272
390
|
|
|
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);
|
|
391
|
+
.safety-note strong {
|
|
392
|
+
align-self: center;
|
|
281
393
|
}
|
|
282
394
|
|
|
283
|
-
.
|
|
284
|
-
|
|
285
|
-
border-block-end: 1px solid var(--line);
|
|
395
|
+
.safety-note span {
|
|
396
|
+
color: var(--accent-copy);
|
|
286
397
|
}
|
|
287
398
|
|
|
288
|
-
.
|
|
289
|
-
|
|
290
|
-
|
|
399
|
+
.backup-note {
|
|
400
|
+
border-color: var(--warning-border);
|
|
401
|
+
background: var(--warning-soft);
|
|
291
402
|
}
|
|
292
403
|
|
|
293
|
-
.
|
|
294
|
-
|
|
295
|
-
|
|
404
|
+
.backup-note::before {
|
|
405
|
+
color: var(--warning);
|
|
406
|
+
background: color-mix(in srgb, var(--warning) 18%, var(--surface));
|
|
407
|
+
content: "!";
|
|
296
408
|
}
|
|
297
409
|
|
|
298
|
-
.
|
|
299
|
-
|
|
300
|
-
color: var(--ink-soft);
|
|
301
|
-
font-size: 0.875rem;
|
|
410
|
+
.backup-note span {
|
|
411
|
+
color: var(--warning);
|
|
302
412
|
}
|
|
303
413
|
|
|
414
|
+
/* ---------- Stepper ---------- */
|
|
415
|
+
|
|
304
416
|
.steps {
|
|
305
|
-
|
|
417
|
+
margin: 2.5rem 0 1.25rem;
|
|
306
418
|
}
|
|
307
419
|
|
|
308
420
|
.steps ol {
|
|
421
|
+
display: grid;
|
|
422
|
+
grid-template-columns: repeat(5, 1fr);
|
|
309
423
|
margin: 0;
|
|
310
424
|
padding: 0;
|
|
311
|
-
display: grid;
|
|
312
|
-
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
313
425
|
list-style: none;
|
|
314
426
|
}
|
|
315
427
|
|
|
316
428
|
.steps li {
|
|
317
429
|
position: relative;
|
|
318
|
-
min-width: 0;
|
|
319
430
|
display: grid;
|
|
320
431
|
justify-items: center;
|
|
321
|
-
gap: 0.
|
|
322
|
-
color: var(--
|
|
432
|
+
gap: 0.4375rem;
|
|
433
|
+
color: var(--text-muted);
|
|
434
|
+
font-size: 0.75rem;
|
|
323
435
|
text-align: center;
|
|
324
436
|
}
|
|
325
437
|
|
|
326
438
|
.steps li::before {
|
|
327
439
|
position: absolute;
|
|
440
|
+
top: 0.9375rem;
|
|
441
|
+
right: 50%;
|
|
328
442
|
z-index: 0;
|
|
329
|
-
inset-block-start: 0.9375rem;
|
|
330
|
-
inset-inline-end: 50%;
|
|
331
443
|
width: 100%;
|
|
332
|
-
height:
|
|
333
|
-
background: var(--
|
|
444
|
+
height: 2px;
|
|
445
|
+
background: var(--border);
|
|
334
446
|
content: "";
|
|
447
|
+
transition: background 400ms var(--ease);
|
|
335
448
|
}
|
|
336
449
|
|
|
337
450
|
.steps li:first-child::before {
|
|
338
451
|
display: none;
|
|
339
452
|
}
|
|
340
453
|
|
|
341
|
-
.
|
|
454
|
+
.steps li span {
|
|
342
455
|
position: relative;
|
|
343
456
|
z-index: 1;
|
|
344
|
-
width: 1.875rem;
|
|
345
|
-
height: 1.875rem;
|
|
346
|
-
border: 1px solid var(--line-strong);
|
|
347
|
-
border-radius: 50%;
|
|
348
457
|
display: grid;
|
|
458
|
+
width: 2rem;
|
|
459
|
+
height: 2rem;
|
|
349
460
|
place-items: center;
|
|
461
|
+
border: 2px solid var(--border-strong);
|
|
462
|
+
border-radius: 50%;
|
|
350
463
|
background: var(--surface);
|
|
351
|
-
|
|
352
|
-
font-
|
|
464
|
+
box-shadow: var(--shadow-sm);
|
|
465
|
+
font-size: 0.8125rem;
|
|
466
|
+
font-weight: 800;
|
|
353
467
|
transition:
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
color
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
.step-copy {
|
|
360
|
-
min-width: 0;
|
|
361
|
-
display: grid;
|
|
362
|
-
gap: 0.125rem;
|
|
468
|
+
border-color 300ms var(--ease),
|
|
469
|
+
background 300ms var(--ease),
|
|
470
|
+
color 300ms var(--ease),
|
|
471
|
+
box-shadow 300ms var(--ease);
|
|
363
472
|
}
|
|
364
473
|
|
|
365
|
-
.
|
|
366
|
-
|
|
367
|
-
font-
|
|
368
|
-
line-height: 1.3;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.step-copy small {
|
|
372
|
-
display: none;
|
|
474
|
+
.steps li em {
|
|
475
|
+
font-style: normal;
|
|
476
|
+
font-weight: 600;
|
|
373
477
|
}
|
|
374
478
|
|
|
375
479
|
.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);
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.steps li.complete .step-index {
|
|
386
|
-
border-color: var(--signal);
|
|
387
|
-
background: var(--surface-muted);
|
|
388
|
-
color: var(--signal-deep);
|
|
480
|
+
color: var(--text);
|
|
389
481
|
}
|
|
390
482
|
|
|
391
|
-
.steps li
|
|
392
|
-
|
|
393
|
-
|
|
483
|
+
.steps li[aria-current="step"] span {
|
|
484
|
+
border-color: var(--accent);
|
|
485
|
+
color: #fff;
|
|
486
|
+
background: var(--accent);
|
|
487
|
+
box-shadow: 0 0 0 5px rgb(19 124 116 / 15%);
|
|
394
488
|
}
|
|
395
489
|
|
|
396
|
-
.
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
490
|
+
.steps li.complete span {
|
|
491
|
+
border-color: var(--accent);
|
|
492
|
+
color: transparent;
|
|
493
|
+
background: var(--accent);
|
|
400
494
|
}
|
|
401
495
|
|
|
402
|
-
.
|
|
403
|
-
|
|
404
|
-
color:
|
|
496
|
+
.steps li.complete span::after {
|
|
497
|
+
position: absolute;
|
|
498
|
+
color: #fff;
|
|
405
499
|
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;
|
|
500
|
+
content: "✓";
|
|
414
501
|
}
|
|
415
502
|
|
|
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;
|
|
503
|
+
.steps li.complete::before,
|
|
504
|
+
.steps li[aria-current="step"]::before {
|
|
505
|
+
background: var(--accent);
|
|
434
506
|
}
|
|
435
507
|
|
|
436
|
-
|
|
437
|
-
color: var(--ink-soft);
|
|
438
|
-
text-align: end;
|
|
439
|
-
}
|
|
508
|
+
/* ---------- Global messages ---------- */
|
|
440
509
|
|
|
441
510
|
.message,
|
|
442
511
|
.error {
|
|
443
|
-
min-height: 2.875rem;
|
|
444
|
-
margin: 0;
|
|
445
|
-
padding: 0.75rem 1rem;
|
|
446
|
-
border-radius: var(--radius);
|
|
447
512
|
display: flex;
|
|
448
513
|
align-items: center;
|
|
449
514
|
gap: 0.625rem;
|
|
515
|
+
min-height: 2.875rem;
|
|
516
|
+
margin: 1rem 0;
|
|
517
|
+
padding: 0.75rem 1rem;
|
|
518
|
+
border-radius: var(--radius-sm);
|
|
450
519
|
font-size: 0.9375rem;
|
|
451
520
|
}
|
|
452
521
|
|
|
453
522
|
.message {
|
|
454
|
-
border: 1px solid var(--
|
|
523
|
+
border: 1px solid var(--border);
|
|
524
|
+
color: var(--text-muted);
|
|
455
525
|
background: var(--surface);
|
|
456
|
-
|
|
526
|
+
box-shadow: var(--shadow-sm);
|
|
457
527
|
}
|
|
458
528
|
|
|
459
529
|
.message::before {
|
|
460
|
-
width: 0.5rem;
|
|
461
|
-
height: 0.5rem;
|
|
462
530
|
flex: 0 0 auto;
|
|
531
|
+
width: 0.4375rem;
|
|
532
|
+
height: 0.4375rem;
|
|
463
533
|
border-radius: 50%;
|
|
464
|
-
background: var(--
|
|
534
|
+
background: var(--accent-bright);
|
|
465
535
|
content: "";
|
|
466
536
|
}
|
|
467
537
|
|
|
468
538
|
.error {
|
|
469
|
-
border: 1px solid var(--danger-
|
|
470
|
-
background: var(--danger-soft);
|
|
539
|
+
border: 1px solid var(--danger-border);
|
|
471
540
|
color: var(--danger);
|
|
541
|
+
background: var(--danger-soft);
|
|
472
542
|
font-weight: 650;
|
|
543
|
+
animation: shake 320ms var(--ease);
|
|
473
544
|
}
|
|
474
545
|
|
|
546
|
+
/* ---------- Panels ---------- */
|
|
547
|
+
|
|
475
548
|
.panel {
|
|
476
|
-
padding: clamp(1.
|
|
477
|
-
border: 1px solid var(--
|
|
549
|
+
padding: clamp(1.5rem, 4vw, 2.25rem);
|
|
550
|
+
border: 1px solid var(--border);
|
|
478
551
|
border-radius: var(--radius-lg);
|
|
479
552
|
background: var(--surface);
|
|
480
|
-
box-shadow: var(--shadow);
|
|
481
|
-
animation: panel-in
|
|
553
|
+
box-shadow: var(--shadow-md);
|
|
554
|
+
animation: panel-in 380ms var(--ease);
|
|
482
555
|
}
|
|
483
556
|
|
|
484
557
|
.panel-heading {
|
|
485
|
-
margin-
|
|
486
|
-
display: grid;
|
|
487
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
488
|
-
align-items: baseline;
|
|
489
|
-
gap: 0.5rem 1rem;
|
|
558
|
+
margin-bottom: 1.5rem;
|
|
490
559
|
}
|
|
491
560
|
|
|
492
|
-
.panel-heading h2,
|
|
493
561
|
.panel-heading p {
|
|
494
|
-
|
|
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;
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
.panel-heading p {
|
|
515
|
-
max-width: 66ch;
|
|
516
|
-
grid-column: 1 / -1;
|
|
517
|
-
color: var(--ink-soft);
|
|
518
|
-
line-height: 1.65;
|
|
562
|
+
max-width: 42rem;
|
|
563
|
+
margin-bottom: 0;
|
|
519
564
|
}
|
|
520
565
|
|
|
521
566
|
.status-row {
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
display: grid;
|
|
525
|
-
grid-template-columns: auto minmax(0, 1fr);
|
|
526
|
-
align-items: start;
|
|
567
|
+
display: flex;
|
|
568
|
+
align-items: flex-start;
|
|
527
569
|
gap: 0.875rem;
|
|
570
|
+
padding: 1rem 1.125rem;
|
|
571
|
+
border: 1px solid var(--border);
|
|
572
|
+
border-radius: var(--radius);
|
|
528
573
|
background: var(--surface-muted);
|
|
529
574
|
}
|
|
530
575
|
|
|
531
|
-
.status-row > span:last-child {
|
|
532
|
-
min-width: 0;
|
|
533
|
-
}
|
|
534
|
-
|
|
535
576
|
.status-row p {
|
|
536
577
|
margin: 0.25rem 0 0;
|
|
537
|
-
color: var(--
|
|
578
|
+
color: var(--text-muted);
|
|
538
579
|
}
|
|
539
580
|
|
|
540
581
|
.status-row .credential-time {
|
|
541
|
-
color: var(--
|
|
582
|
+
color: var(--text);
|
|
542
583
|
font-size: 0.875rem;
|
|
543
|
-
font-weight:
|
|
584
|
+
font-weight: 700;
|
|
544
585
|
}
|
|
545
586
|
|
|
546
587
|
.status-dot {
|
|
588
|
+
flex: 0 0 auto;
|
|
547
589
|
width: 0.75rem;
|
|
548
590
|
height: 0.75rem;
|
|
549
|
-
margin-
|
|
550
|
-
border: 2px solid var(--
|
|
591
|
+
margin-top: 0.375rem;
|
|
592
|
+
border: 2px solid var(--border-strong);
|
|
551
593
|
border-radius: 50%;
|
|
552
|
-
background: var(--surface);
|
|
553
594
|
transition:
|
|
554
|
-
border-color
|
|
555
|
-
background
|
|
595
|
+
border-color 300ms var(--ease),
|
|
596
|
+
background 300ms var(--ease),
|
|
597
|
+
box-shadow 300ms var(--ease);
|
|
556
598
|
}
|
|
557
599
|
|
|
558
600
|
.status-dot.ready {
|
|
559
601
|
border-color: var(--success);
|
|
560
602
|
background: var(--success);
|
|
603
|
+
box-shadow: 0 0 0 4px rgb(23 101 63 / 14%);
|
|
561
604
|
}
|
|
562
605
|
|
|
563
|
-
/* Fields */
|
|
606
|
+
/* ---------- Fields ---------- */
|
|
564
607
|
|
|
565
608
|
.field-grid {
|
|
566
609
|
display: grid;
|
|
567
|
-
grid-template-columns: minmax(0, 2fr) minmax(
|
|
568
|
-
gap:
|
|
569
|
-
margin-
|
|
610
|
+
grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr);
|
|
611
|
+
gap: 1rem;
|
|
612
|
+
margin-bottom: 1rem;
|
|
570
613
|
}
|
|
571
614
|
|
|
572
615
|
.field-grid.single {
|
|
@@ -574,108 +617,120 @@ a:focus-visible,
|
|
|
574
617
|
}
|
|
575
618
|
|
|
576
619
|
.field {
|
|
577
|
-
min-width: 0;
|
|
578
620
|
display: grid;
|
|
579
621
|
align-content: start;
|
|
580
|
-
gap: 0.
|
|
581
|
-
font-weight:
|
|
622
|
+
gap: 0.4375rem;
|
|
623
|
+
font-weight: 700;
|
|
582
624
|
}
|
|
583
625
|
|
|
584
626
|
.field input,
|
|
585
627
|
.field select {
|
|
586
628
|
width: 100%;
|
|
587
629
|
min-height: 2.875rem;
|
|
588
|
-
padding: 0.625rem 0.
|
|
589
|
-
border: 1px solid var(--
|
|
630
|
+
padding: 0.625rem 0.875rem;
|
|
631
|
+
border: 1px solid var(--border-strong);
|
|
590
632
|
border-radius: var(--radius-sm);
|
|
591
|
-
|
|
592
|
-
|
|
633
|
+
color: var(--text);
|
|
634
|
+
background: var(--surface);
|
|
593
635
|
transition:
|
|
594
|
-
border-color
|
|
595
|
-
box-shadow
|
|
636
|
+
border-color 200ms var(--ease),
|
|
637
|
+
box-shadow 200ms var(--ease),
|
|
638
|
+
background 200ms var(--ease);
|
|
596
639
|
}
|
|
597
640
|
|
|
598
641
|
.field select {
|
|
599
|
-
|
|
642
|
+
appearance: none;
|
|
643
|
+
padding-right: 2.25rem;
|
|
644
|
+
background-image:
|
|
645
|
+
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
|
|
646
|
+
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
|
|
647
|
+
background-position:
|
|
648
|
+
calc(100% - 1.125rem) 50%,
|
|
649
|
+
calc(100% - 0.8125rem) 50%;
|
|
650
|
+
background-size:
|
|
651
|
+
0.3125rem 0.3125rem,
|
|
652
|
+
0.3125rem 0.3125rem;
|
|
653
|
+
background-repeat: no-repeat;
|
|
600
654
|
}
|
|
601
655
|
|
|
602
656
|
.field input:hover,
|
|
603
657
|
.field select:hover {
|
|
604
|
-
border-color: var(--
|
|
658
|
+
border-color: var(--accent);
|
|
605
659
|
}
|
|
606
660
|
|
|
607
661
|
.field input:focus,
|
|
608
662
|
.field select:focus {
|
|
609
|
-
border-color: var(--
|
|
663
|
+
border-color: var(--accent);
|
|
610
664
|
outline: 0;
|
|
611
|
-
box-shadow: 0 0 0
|
|
665
|
+
box-shadow: 0 0 0 4px rgb(19 124 116 / 13%);
|
|
612
666
|
}
|
|
613
667
|
|
|
614
668
|
.field input:disabled {
|
|
669
|
+
color: var(--text-muted);
|
|
615
670
|
background: var(--surface-muted);
|
|
616
|
-
color: var(--ink-soft);
|
|
617
671
|
cursor: not-allowed;
|
|
618
672
|
}
|
|
619
673
|
|
|
620
674
|
.field small {
|
|
621
|
-
color: var(--
|
|
675
|
+
color: var(--text-muted);
|
|
622
676
|
font-size: 0.75rem;
|
|
623
677
|
font-weight: 450;
|
|
624
|
-
line-height: 1.5;
|
|
625
678
|
}
|
|
626
679
|
|
|
627
680
|
code {
|
|
628
|
-
padding: 0.
|
|
681
|
+
padding: 0.1rem 0.3rem;
|
|
629
682
|
border-radius: 0.25rem;
|
|
630
|
-
background:
|
|
631
|
-
font-family:
|
|
683
|
+
background: var(--surface-muted);
|
|
684
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
632
685
|
font-size: 0.875em;
|
|
633
686
|
overflow-wrap: anywhere;
|
|
634
687
|
}
|
|
635
688
|
|
|
636
|
-
/* Buttons */
|
|
689
|
+
/* ---------- Buttons ---------- */
|
|
637
690
|
|
|
638
691
|
.actions {
|
|
639
|
-
margin-block-start: 1.75rem;
|
|
640
692
|
display: flex;
|
|
641
693
|
flex-wrap: wrap;
|
|
642
694
|
justify-content: flex-end;
|
|
643
695
|
gap: 0.75rem;
|
|
696
|
+
margin-top: 1.75rem;
|
|
644
697
|
}
|
|
645
698
|
|
|
646
699
|
.button {
|
|
647
|
-
|
|
648
|
-
padding: 0.625rem 1rem;
|
|
649
|
-
border: 1px solid transparent;
|
|
650
|
-
border-radius: var(--radius);
|
|
700
|
+
position: relative;
|
|
651
701
|
display: inline-flex;
|
|
652
702
|
align-items: center;
|
|
653
703
|
justify-content: center;
|
|
654
704
|
gap: 0.5rem;
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
705
|
+
min-height: 2.875rem;
|
|
706
|
+
padding: 0.625rem 1.125rem;
|
|
707
|
+
border: 1px solid transparent;
|
|
708
|
+
border-radius: 0.625rem;
|
|
709
|
+
font-weight: 750;
|
|
710
|
+
box-shadow: var(--shadow-sm);
|
|
659
711
|
cursor: pointer;
|
|
660
712
|
transition:
|
|
661
|
-
transform
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
color
|
|
665
|
-
|
|
713
|
+
transform 200ms var(--ease),
|
|
714
|
+
box-shadow 200ms var(--ease),
|
|
715
|
+
background 200ms var(--ease),
|
|
716
|
+
color 200ms var(--ease),
|
|
717
|
+
border-color 200ms var(--ease),
|
|
718
|
+
opacity 200ms var(--ease);
|
|
666
719
|
}
|
|
667
720
|
|
|
668
721
|
.button:not(:disabled):hover {
|
|
669
|
-
transform: translateY(-
|
|
722
|
+
transform: translateY(-1px);
|
|
723
|
+
box-shadow: var(--shadow-md);
|
|
670
724
|
}
|
|
671
725
|
|
|
672
726
|
.button:not(:disabled):active {
|
|
673
|
-
transform: translateY(0);
|
|
727
|
+
transform: translateY(0) scale(0.98);
|
|
728
|
+
box-shadow: var(--shadow-sm);
|
|
674
729
|
}
|
|
675
730
|
|
|
676
731
|
.button:disabled {
|
|
677
732
|
cursor: not-allowed;
|
|
678
|
-
opacity: 0.
|
|
733
|
+
opacity: 0.48;
|
|
679
734
|
}
|
|
680
735
|
|
|
681
736
|
.button[aria-busy="true"] {
|
|
@@ -683,81 +738,84 @@ code {
|
|
|
683
738
|
}
|
|
684
739
|
|
|
685
740
|
.button[aria-busy="true"]::after {
|
|
686
|
-
width: 0.
|
|
687
|
-
height: 0.
|
|
741
|
+
width: 0.9375rem;
|
|
742
|
+
height: 0.9375rem;
|
|
688
743
|
flex: 0 0 auto;
|
|
689
744
|
border: 2px solid currentcolor;
|
|
690
|
-
border-
|
|
745
|
+
border-top-color: transparent;
|
|
691
746
|
border-radius: 50%;
|
|
692
747
|
content: "";
|
|
693
748
|
animation: spin 700ms linear infinite;
|
|
694
749
|
}
|
|
695
750
|
|
|
696
751
|
.button.primary {
|
|
697
|
-
|
|
698
|
-
|
|
752
|
+
color: #fff;
|
|
753
|
+
background: var(--accent);
|
|
699
754
|
}
|
|
700
755
|
|
|
701
756
|
.button.primary:not(:disabled):hover {
|
|
702
|
-
background: var(--
|
|
757
|
+
background: var(--accent-deep);
|
|
703
758
|
}
|
|
704
759
|
|
|
705
760
|
.button.secondary {
|
|
706
|
-
border-color: var(--
|
|
707
|
-
|
|
708
|
-
|
|
761
|
+
border-color: var(--border-strong);
|
|
762
|
+
color: var(--text);
|
|
763
|
+
background: var(--surface);
|
|
709
764
|
}
|
|
710
765
|
|
|
711
766
|
.button.secondary:not(:disabled):hover,
|
|
712
767
|
.button.ghost:not(:disabled):hover {
|
|
713
|
-
border-color: var(--
|
|
714
|
-
background: var(--
|
|
768
|
+
border-color: var(--accent);
|
|
769
|
+
background: var(--accent-soft);
|
|
715
770
|
}
|
|
716
771
|
|
|
717
772
|
.button.ghost {
|
|
718
|
-
margin-
|
|
773
|
+
margin-right: auto;
|
|
774
|
+
color: var(--text-muted);
|
|
719
775
|
background: transparent;
|
|
720
|
-
|
|
776
|
+
box-shadow: none;
|
|
721
777
|
}
|
|
722
778
|
|
|
723
779
|
.button.copied {
|
|
724
780
|
border-color: var(--success);
|
|
725
|
-
background: var(--success-soft);
|
|
726
781
|
color: var(--success);
|
|
782
|
+
background: color-mix(in srgb, var(--success) 12%, var(--surface));
|
|
727
783
|
}
|
|
728
784
|
|
|
729
|
-
/*
|
|
785
|
+
/* ---------- Fingerprint & approvals ---------- */
|
|
730
786
|
|
|
731
787
|
.fingerprint {
|
|
732
|
-
margin-
|
|
733
|
-
padding:
|
|
734
|
-
border: 1px solid var(--warning-
|
|
788
|
+
margin-top: 1rem;
|
|
789
|
+
padding: 1.125rem;
|
|
790
|
+
border: 1px solid var(--warning-border);
|
|
735
791
|
border-radius: var(--radius);
|
|
736
792
|
background: var(--warning-soft);
|
|
793
|
+
animation: panel-in 320ms var(--ease);
|
|
737
794
|
}
|
|
738
795
|
|
|
739
796
|
.fingerprint > span {
|
|
740
797
|
display: block;
|
|
741
|
-
margin-
|
|
798
|
+
margin-bottom: 0.375rem;
|
|
742
799
|
color: var(--warning);
|
|
743
800
|
font-size: 0.75rem;
|
|
744
|
-
font-weight:
|
|
801
|
+
font-weight: 800;
|
|
802
|
+
text-transform: uppercase;
|
|
745
803
|
}
|
|
746
804
|
|
|
747
805
|
.fingerprint > code {
|
|
748
806
|
display: block;
|
|
749
|
-
margin-
|
|
807
|
+
margin-bottom: 1rem;
|
|
750
808
|
padding: 0.625rem 0.75rem;
|
|
751
|
-
border: 1px solid var(--warning-
|
|
809
|
+
border: 1px solid var(--warning-border);
|
|
752
810
|
border-radius: var(--radius-sm);
|
|
753
811
|
background: var(--surface);
|
|
754
812
|
}
|
|
755
813
|
|
|
756
814
|
.check-row {
|
|
757
815
|
display: grid;
|
|
758
|
-
grid-template-columns: 1.25rem
|
|
759
|
-
align-items: start;
|
|
816
|
+
grid-template-columns: 1.25rem 1fr;
|
|
760
817
|
gap: 0.625rem;
|
|
818
|
+
align-items: start;
|
|
761
819
|
font-weight: 600;
|
|
762
820
|
cursor: pointer;
|
|
763
821
|
}
|
|
@@ -766,58 +824,59 @@ code {
|
|
|
766
824
|
width: 1.125rem;
|
|
767
825
|
height: 1.125rem;
|
|
768
826
|
margin: 0.2rem 0 0;
|
|
769
|
-
accent-color: var(--
|
|
827
|
+
accent-color: var(--accent);
|
|
770
828
|
cursor: pointer;
|
|
771
829
|
}
|
|
772
830
|
|
|
773
831
|
.version-strip {
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
832
|
+
display: flex;
|
|
833
|
+
flex-wrap: wrap;
|
|
834
|
+
gap: 0.625rem;
|
|
835
|
+
margin-bottom: 1.25rem;
|
|
778
836
|
}
|
|
779
837
|
|
|
780
838
|
.version-strip span {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
border-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
.version-strip strong {
|
|
790
|
-
color: var(--ink);
|
|
839
|
+
display: inline-flex;
|
|
840
|
+
align-items: center;
|
|
841
|
+
gap: 0.375rem;
|
|
842
|
+
padding: 0.4375rem 0.75rem;
|
|
843
|
+
border: 1px solid var(--border);
|
|
844
|
+
border-radius: 999px;
|
|
845
|
+
background: var(--surface-muted);
|
|
846
|
+
font-size: 0.8125rem;
|
|
791
847
|
}
|
|
792
848
|
|
|
793
|
-
/*
|
|
849
|
+
/* ---------- Review ---------- */
|
|
794
850
|
|
|
795
851
|
.review-grid {
|
|
796
|
-
|
|
852
|
+
display: grid;
|
|
853
|
+
grid-template-columns: 1fr 1fr;
|
|
854
|
+
gap: 1rem;
|
|
797
855
|
}
|
|
798
856
|
|
|
799
857
|
.review-grid section {
|
|
800
|
-
padding
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
858
|
+
padding: 1.125rem;
|
|
859
|
+
border: 1px solid var(--border);
|
|
860
|
+
border-radius: var(--radius);
|
|
861
|
+
background: var(--surface-muted);
|
|
804
862
|
}
|
|
805
863
|
|
|
806
|
-
.review-grid section
|
|
807
|
-
border-
|
|
864
|
+
.review-grid section:first-child {
|
|
865
|
+
border-color: var(--accent-border);
|
|
866
|
+
background: var(--accent-soft);
|
|
808
867
|
}
|
|
809
868
|
|
|
810
|
-
.review-grid
|
|
811
|
-
|
|
812
|
-
|
|
869
|
+
.review-grid section:last-child {
|
|
870
|
+
border-color: var(--danger-border);
|
|
871
|
+
background: var(--danger-soft);
|
|
813
872
|
}
|
|
814
873
|
|
|
815
874
|
.check-list,
|
|
816
875
|
.no-list {
|
|
817
|
-
margin: 0;
|
|
818
|
-
padding-inline-start: 1.25rem;
|
|
819
876
|
display: grid;
|
|
820
877
|
gap: 0.625rem;
|
|
878
|
+
margin: 0;
|
|
879
|
+
padding-left: 1.25rem;
|
|
821
880
|
}
|
|
822
881
|
|
|
823
882
|
.check-list li::marker {
|
|
@@ -829,62 +888,54 @@ code {
|
|
|
829
888
|
}
|
|
830
889
|
|
|
831
890
|
.approval {
|
|
832
|
-
margin-
|
|
833
|
-
padding: 1rem;
|
|
834
|
-
border: 1px solid var(--warning-
|
|
891
|
+
margin-top: 1rem;
|
|
892
|
+
padding: 1rem 1.125rem;
|
|
893
|
+
border: 1px solid var(--warning-border);
|
|
835
894
|
border-radius: var(--radius);
|
|
836
895
|
background: var(--warning-soft);
|
|
837
896
|
}
|
|
838
897
|
|
|
839
|
-
/*
|
|
898
|
+
/* ---------- Success ---------- */
|
|
899
|
+
|
|
900
|
+
.success-panel {
|
|
901
|
+
position: relative;
|
|
902
|
+
}
|
|
840
903
|
|
|
841
904
|
.success-mark {
|
|
905
|
+
display: grid;
|
|
842
906
|
width: 3.25rem;
|
|
843
907
|
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;
|
|
908
|
+
margin-bottom: 1.25rem;
|
|
909
|
+
place-items: center;
|
|
910
|
+
border-radius: 50%;
|
|
911
|
+
color: #fff;
|
|
912
|
+
background: linear-gradient(140deg, #1d8a5f, var(--success));
|
|
913
|
+
box-shadow: 0 0 0 6px rgb(23 101 63 / 14%);
|
|
914
|
+
font-size: 1.5rem;
|
|
915
|
+
font-weight: 900;
|
|
916
|
+
animation: pop-in 480ms var(--ease);
|
|
864
917
|
}
|
|
865
918
|
|
|
866
919
|
.result-list {
|
|
867
|
-
|
|
868
|
-
border-block-start: 1px solid var(--line);
|
|
920
|
+
border-top: 1px solid var(--border);
|
|
869
921
|
}
|
|
870
922
|
|
|
871
|
-
.result-list
|
|
872
|
-
padding-block: 0.875rem;
|
|
873
|
-
border-block-end: 1px solid var(--line);
|
|
923
|
+
.result-list div {
|
|
874
924
|
display: grid;
|
|
875
|
-
grid-template-columns: 9rem
|
|
876
|
-
align-items: center;
|
|
925
|
+
grid-template-columns: 9rem 1fr;
|
|
877
926
|
gap: 1rem;
|
|
927
|
+
align-items: center;
|
|
928
|
+
padding: 0.875rem 0;
|
|
929
|
+
border-bottom: 1px solid var(--border);
|
|
878
930
|
}
|
|
879
931
|
|
|
880
932
|
.result-list dt {
|
|
881
|
-
color: var(--
|
|
933
|
+
color: var(--text-muted);
|
|
882
934
|
}
|
|
883
935
|
|
|
884
936
|
.result-list dd {
|
|
885
|
-
min-width: 0;
|
|
886
937
|
margin: 0;
|
|
887
|
-
font-weight:
|
|
938
|
+
font-weight: 700;
|
|
888
939
|
}
|
|
889
940
|
|
|
890
941
|
.result-list dd.result-value {
|
|
@@ -896,290 +947,169 @@ code {
|
|
|
896
947
|
}
|
|
897
948
|
|
|
898
949
|
.copy-value {
|
|
899
|
-
min-height: 2.
|
|
900
|
-
padding: 0.
|
|
950
|
+
min-height: 2.125rem;
|
|
951
|
+
padding: 0.3125rem 0.75rem;
|
|
952
|
+
border-radius: 0.5rem;
|
|
901
953
|
font-size: 0.8125rem;
|
|
902
954
|
}
|
|
903
955
|
|
|
904
956
|
.model-box,
|
|
905
957
|
.final-note {
|
|
906
|
-
margin-
|
|
907
|
-
padding
|
|
908
|
-
border
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
.model-box h3 {
|
|
912
|
-
margin-block: 0 0.75rem;
|
|
958
|
+
margin-top: 1.5rem;
|
|
959
|
+
padding: 1.125rem;
|
|
960
|
+
border: 1px solid var(--border);
|
|
961
|
+
border-radius: var(--radius);
|
|
962
|
+
background: var(--surface-muted);
|
|
913
963
|
}
|
|
914
964
|
|
|
915
965
|
.model-box p,
|
|
916
966
|
.final-note {
|
|
917
|
-
|
|
918
|
-
line-height: 1.6;
|
|
967
|
+
margin-bottom: 0;
|
|
919
968
|
}
|
|
920
969
|
|
|
921
|
-
.model-box p
|
|
922
|
-
|
|
923
|
-
margin-block-end: 0;
|
|
970
|
+
.model-box p {
|
|
971
|
+
color: var(--text-muted);
|
|
924
972
|
}
|
|
925
973
|
|
|
926
|
-
|
|
927
|
-
padding
|
|
928
|
-
border-
|
|
929
|
-
color: var(--
|
|
974
|
+
footer {
|
|
975
|
+
padding: 1.5rem 1rem;
|
|
976
|
+
border-top: 1px solid var(--border);
|
|
977
|
+
color: var(--text-muted);
|
|
978
|
+
background: var(--surface);
|
|
930
979
|
font-size: 0.8125rem;
|
|
931
980
|
text-align: center;
|
|
932
981
|
}
|
|
933
982
|
|
|
934
|
-
|
|
983
|
+
footer p {
|
|
935
984
|
margin: 0;
|
|
936
985
|
}
|
|
937
986
|
|
|
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
|
-
}
|
|
987
|
+
/* ---------- Dark mode refinement ---------- */
|
|
952
988
|
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
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
|
-
}
|
|
967
|
-
|
|
968
|
-
.wizard-intro .intro-ledger {
|
|
969
|
-
margin-block-start: 0;
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
.wizard-layout {
|
|
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
|
-
}
|
|
978
|
-
|
|
979
|
-
.route-rail {
|
|
980
|
-
position: sticky;
|
|
981
|
-
inset-block-start: 5.75rem;
|
|
982
|
-
}
|
|
989
|
+
:root[data-theme="dark"] .brand-mark {
|
|
990
|
+
padding: 0.125rem;
|
|
991
|
+
background: #f7f8f5;
|
|
992
|
+
box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
|
|
993
|
+
}
|
|
983
994
|
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
995
|
+
:root[data-theme="dark"] .eyebrow,
|
|
996
|
+
:root[data-theme="dark"] .step-kicker {
|
|
997
|
+
color: var(--accent-bright);
|
|
998
|
+
}
|
|
987
999
|
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
gap: 0.875rem;
|
|
994
|
-
text-align: start;
|
|
1000
|
+
@media (prefers-color-scheme: dark) {
|
|
1001
|
+
:root:not([data-theme]) .brand-mark {
|
|
1002
|
+
padding: 0.125rem;
|
|
1003
|
+
background: #f7f8f5;
|
|
1004
|
+
box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
|
|
995
1005
|
}
|
|
996
1006
|
|
|
997
|
-
.
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
inset-inline-start: 0.9375rem;
|
|
1001
|
-
width: 1px;
|
|
1002
|
-
height: 100%;
|
|
1007
|
+
:root:not([data-theme]) .eyebrow,
|
|
1008
|
+
:root:not([data-theme]) .step-kicker {
|
|
1009
|
+
color: var(--accent-bright);
|
|
1003
1010
|
}
|
|
1011
|
+
}
|
|
1004
1012
|
|
|
1005
|
-
|
|
1006
|
-
padding-block-start: 0.125rem;
|
|
1007
|
-
}
|
|
1013
|
+
/* ---------- Animations ---------- */
|
|
1008
1014
|
|
|
1009
|
-
|
|
1010
|
-
|
|
1015
|
+
@keyframes panel-in {
|
|
1016
|
+
from {
|
|
1017
|
+
opacity: 0;
|
|
1018
|
+
transform: translateY(14px);
|
|
1011
1019
|
}
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
color: var(--ink-soft);
|
|
1016
|
-
font-size: 0.75rem;
|
|
1020
|
+
to {
|
|
1021
|
+
opacity: 1;
|
|
1022
|
+
transform: translateY(0);
|
|
1017
1023
|
}
|
|
1018
1024
|
}
|
|
1019
1025
|
|
|
1020
|
-
@
|
|
1021
|
-
|
|
1022
|
-
|
|
1026
|
+
@keyframes pop-in {
|
|
1027
|
+
0% {
|
|
1028
|
+
opacity: 0;
|
|
1029
|
+
transform: scale(0.5);
|
|
1023
1030
|
}
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
.review-grid section {
|
|
1027
|
-
grid-template-columns: 1fr;
|
|
1031
|
+
70% {
|
|
1032
|
+
transform: scale(1.08);
|
|
1028
1033
|
}
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1034
|
+
100% {
|
|
1035
|
+
opacity: 1;
|
|
1036
|
+
transform: scale(1);
|
|
1032
1037
|
}
|
|
1038
|
+
}
|
|
1033
1039
|
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1040
|
+
@keyframes shake {
|
|
1041
|
+
0%,
|
|
1042
|
+
100% {
|
|
1043
|
+
transform: translateX(0);
|
|
1037
1044
|
}
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
margin-block-start: 1.25rem;
|
|
1045
|
+
25% {
|
|
1046
|
+
transform: translateX(-4px);
|
|
1041
1047
|
}
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
.intro-ledger > span:first-child {
|
|
1045
|
-
padding: 0.75rem 0.5rem;
|
|
1048
|
+
75% {
|
|
1049
|
+
transform: translateX(4px);
|
|
1046
1050
|
}
|
|
1051
|
+
}
|
|
1047
1052
|
|
|
1048
|
-
|
|
1049
|
-
|
|
1053
|
+
@keyframes spin {
|
|
1054
|
+
to {
|
|
1055
|
+
transform: rotate(360deg);
|
|
1050
1056
|
}
|
|
1057
|
+
}
|
|
1051
1058
|
|
|
1052
|
-
|
|
1053
|
-
font-size: 0.75rem;
|
|
1054
|
-
line-height: 1.25;
|
|
1055
|
-
}
|
|
1059
|
+
/* ---------- Responsive ---------- */
|
|
1056
1060
|
|
|
1057
|
-
|
|
1061
|
+
@media (max-width: 42rem) {
|
|
1062
|
+
.local-badge {
|
|
1058
1063
|
display: none;
|
|
1059
1064
|
}
|
|
1060
1065
|
|
|
1061
|
-
.
|
|
1062
|
-
|
|
1063
|
-
gap: 0.875rem;
|
|
1064
|
-
}
|
|
1065
|
-
|
|
1066
|
-
.route-rail > header,
|
|
1067
|
-
.rail-boundary {
|
|
1068
|
-
display: none;
|
|
1066
|
+
.site-header {
|
|
1067
|
+
padding-inline: 1rem;
|
|
1069
1068
|
}
|
|
1070
1069
|
|
|
1071
|
-
.
|
|
1072
|
-
|
|
1070
|
+
.header-actions {
|
|
1071
|
+
gap: 0.375rem;
|
|
1073
1072
|
}
|
|
1074
1073
|
|
|
1075
|
-
.
|
|
1076
|
-
|
|
1077
|
-
|
|
1074
|
+
.shell {
|
|
1075
|
+
width: min(100% - 1rem, 54rem);
|
|
1076
|
+
padding-top: 2rem;
|
|
1078
1077
|
}
|
|
1079
1078
|
|
|
1080
|
-
.
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1079
|
+
.safety-note,
|
|
1080
|
+
.field-grid,
|
|
1081
|
+
.review-grid {
|
|
1082
|
+
grid-template-columns: 1fr;
|
|
1084
1083
|
}
|
|
1085
1084
|
|
|
1086
|
-
.
|
|
1087
|
-
|
|
1085
|
+
.safety-note::before {
|
|
1086
|
+
grid-row: auto;
|
|
1088
1087
|
}
|
|
1089
1088
|
|
|
1090
|
-
.
|
|
1091
|
-
|
|
1089
|
+
.steps li em {
|
|
1090
|
+
font-size: 0.6875rem;
|
|
1092
1091
|
}
|
|
1093
1092
|
|
|
1094
|
-
.panel
|
|
1095
|
-
|
|
1093
|
+
.panel {
|
|
1094
|
+
border-radius: var(--radius);
|
|
1096
1095
|
}
|
|
1097
1096
|
|
|
1098
1097
|
.actions {
|
|
1099
|
-
align-items: stretch;
|
|
1100
1098
|
flex-direction: column-reverse;
|
|
1101
1099
|
}
|
|
1102
1100
|
|
|
1103
1101
|
.button,
|
|
1104
1102
|
.button.ghost {
|
|
1105
1103
|
width: 100%;
|
|
1106
|
-
margin-
|
|
1104
|
+
margin-right: 0;
|
|
1107
1105
|
}
|
|
1108
1106
|
|
|
1109
|
-
.
|
|
1110
|
-
gap: 0.75rem;
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
.result-list > div {
|
|
1107
|
+
.result-list div {
|
|
1114
1108
|
grid-template-columns: 1fr;
|
|
1115
1109
|
gap: 0.25rem;
|
|
1116
1110
|
}
|
|
1117
1111
|
}
|
|
1118
1112
|
|
|
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
1113
|
@media (prefers-reduced-motion: reduce) {
|
|
1184
1114
|
html {
|
|
1185
1115
|
scroll-behavior: auto;
|