@ash-qw/dsh-theme-prts 1.1.1 → 1.2.1

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.en.md +10 -8
  3. package/README.md +10 -8
  4. package/lib/client.js +434 -83
  5. package/package.json +2 -2
  6. package/src/client/custom-emblem.js +390 -55
  7. package/src/client/emblem-reorder.js +16 -4
  8. package/src/client/facility-vector.js +49 -32
  9. package/src/client/sidebar-control-adapter.js +7 -8
  10. package/src/client/theme-settings-workbench.js +7 -1
  11. package/src/index.js +1 -1
  12. package/src/server/api.js +3 -3
  13. package/src/server/emblems.js +51 -18
  14. package/src/server/image-worker.js +30 -13
  15. package/src/server/tools.js +19 -8
  16. package/src/styles/cursor.css +7 -1
  17. package/src/styles/prts.css +1 -3
  18. package/src/styles/theme-settings-workbench.css +547 -643
package/src/styles/theme-settings-workbench.css CHANGED
@@ -1,395 +1,349 @@
1
- /* Simplified P.R.T.S. theme settings workbench. */
2
1
  html[data-dsh-prts] [data-prts-theme-settings] {
3
- --prts-settings-text: .875rem;
4
- --prts-settings-small: .75rem;
5
- --prts-settings-heading: .875rem;
6
- position: fixed;
7
- z-index: 10000;
8
- inset: 50% auto auto 50%;
9
- width: min(clamp(50rem, 55vw, 65rem), calc(100vw - 2rem));
10
- height: auto;
11
- max-width: none;
12
- max-height: min(60rem, calc(100dvh - 2rem));
13
- container: prts-settings / inline-size;
14
- margin: 0;
15
- padding: 0;
16
- overflow: visible;
17
- border: 0;
18
- border-radius: 0;
19
- background: transparent;
20
- color: var(--prts-ink);
21
- box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
22
- clip-path: none;
23
- opacity: 0;
24
- transform: translate(-50%, calc(-50% + 8px)) scale(.992);
25
- pointer-events: none;
26
- transition: opacity 150ms ease, transform 220ms var(--prts-ease-spring);
27
- }
28
-
2
+ --prts-settings-text: .875rem;
3
+ --prts-settings-small: .75rem;
4
+ --prts-settings-heading: .875rem;
5
+ position: fixed;
6
+ z-index: 10000;
7
+ inset: 50% auto auto 50%;
8
+ width: min(clamp(50rem, 55vw, 65rem), calc(100vw - 2rem));
9
+ height: auto;
10
+ max-width: none;
11
+ max-height: min(60rem, calc(100dvh - 2rem));
12
+ container: prts-settings / inline-size;
13
+ margin: 0;
14
+ padding: 0;
15
+ overflow: visible;
16
+ border: 0;
17
+ border-radius: 0;
18
+ background: transparent;
19
+ color: var(--prts-ink);
20
+ box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
21
+ clip-path: none;
22
+ opacity: 0;
23
+ transform: translate(-50%, calc(-50% + 8px)) scale(.992);
24
+ pointer-events: none;
25
+ transition: opacity 150ms ease, transform 220ms var(--prts-ease-spring);
26
+ }
29
27
  html[data-dsh-prts] [data-prts-theme-settings][open] {
30
- display: block;
28
+ display: block;
31
29
  }
32
-
33
30
  html[data-dsh-prts] [data-prts-theme-settings][data-prts-settings-visible] {
34
- opacity: 1;
35
- transform: translate(-50%, -50%) scale(1);
36
- pointer-events: auto;
31
+ opacity: 1;
32
+ transform: translate(-50%, -50%) scale(1);
33
+ pointer-events: auto;
37
34
  }
38
-
39
35
  html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing] {
40
- transition: none;
36
+ transition: none;
41
37
  }
42
-
43
38
  html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing]::backdrop,
44
39
  html[data-dsh-prts] [data-prts-settings-backdrop][data-prts-resizing] {
45
- backdrop-filter: none;
46
- -webkit-backdrop-filter: none;
40
+ backdrop-filter: none;
41
+ -webkit-backdrop-filter: none;
47
42
  }
48
-
49
43
  html[data-dsh-prts] [data-prts-theme-settings][data-prts-resizing]
50
- [data-prts-option-sample="glass"]::after {
51
- backdrop-filter: none;
52
- -webkit-backdrop-filter: none;
53
- transition: none;
44
+ [data-prts-option-sample="glass"]::after {
45
+ backdrop-filter: none;
46
+ -webkit-backdrop-filter: none;
47
+ transition: none;
54
48
  }
55
-
56
49
  html[data-dsh-prts] [data-prts-theme-settings]::before {
57
- content: none;
50
+ content: none;
58
51
  }
59
-
60
52
  html[data-dsh-prts] [data-prts-theme-settings]::backdrop {
61
- background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
62
- backdrop-filter: blur(5px) saturate(.82);
63
- -webkit-backdrop-filter: blur(5px) saturate(.82);
53
+ background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
54
+ backdrop-filter: blur(5px) saturate(.82);
55
+ -webkit-backdrop-filter: blur(5px) saturate(.82);
64
56
  }
65
-
66
57
  html[data-dsh-prts] [data-prts-settings-backdrop] {
67
- z-index: 9999;
68
- inset: 0;
69
- background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
70
- backdrop-filter: blur(5px) saturate(.82);
71
- -webkit-backdrop-filter: blur(5px) saturate(.82);
58
+ z-index: 9999;
59
+ inset: 0;
60
+ background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
61
+ backdrop-filter: blur(5px) saturate(.82);
62
+ -webkit-backdrop-filter: blur(5px) saturate(.82);
72
63
  }
73
-
74
64
  html[data-dsh-prts] [data-prts-settings-frame] {
75
- position: relative;
76
- height: auto;
77
- max-height: inherit;
78
- display: grid;
79
- grid-template-rows: auto minmax(0, 1fr);
80
- overflow: hidden;
81
- isolation: isolate;
82
- border: 1px solid var(--prts-line-strong);
83
- background:
84
- linear-gradient(125deg, color-mix(in srgb, var(--prts-cyan) 4%, transparent), transparent 34%),
85
- var(--prts-panel);
86
- clip-path: polygon(4px 0, calc(100% - 38px) 0, 100% 38px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
87
- }
88
-
65
+ position: relative;
66
+ height: auto;
67
+ max-height: inherit;
68
+ display: grid;
69
+ grid-template-rows: auto minmax(0, 1fr);
70
+ overflow: hidden;
71
+ isolation: isolate;
72
+ border: 1px solid var(--prts-line-strong);
73
+ background:
74
+ linear-gradient(125deg, color-mix(in srgb, var(--prts-cyan) 4%, transparent), transparent 34%),
75
+ var(--prts-panel);
76
+ clip-path: polygon(4px 0, calc(100% - 38px) 0, 100% 38px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
77
+ }
89
78
  html[data-dsh-prts] [data-prts-settings-frame]::before {
90
- content: "";
91
- position: absolute;
92
- z-index: 3;
93
- top: 0;
94
- right: 37px;
95
- width: 118px;
96
- height: 2px;
97
- background: var(--prts-cyan);
98
- pointer-events: none;
99
- }
100
-
79
+ content: "";
80
+ position: absolute;
81
+ z-index: 3;
82
+ top: 0;
83
+ right: 37px;
84
+ width: 118px;
85
+ height: 2px;
86
+ background: var(--prts-cyan);
87
+ pointer-events: none;
88
+ }
101
89
  html[data-dsh-prts] [data-prts-theme-settings-header] {
102
- display: grid;
103
- align-items: center;
104
- min-height: 68px;
105
- grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
106
- gap: 14px;
107
- padding: 13px 48px 12px 16px;
108
- border-bottom: 1px solid var(--prts-line-strong);
109
- background: color-mix(in srgb, var(--prts-canvas-elevated) 92%, transparent);
110
- }
111
-
90
+ display: grid;
91
+ align-items: center;
92
+ min-height: 68px;
93
+ grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
94
+ gap: 14px;
95
+ padding: 13px 48px 12px 16px;
96
+ border-bottom: 1px solid var(--prts-line-strong);
97
+ background: color-mix(in srgb, var(--prts-canvas-elevated) 92%, transparent);
98
+ }
112
99
  html[data-dsh-prts] [data-prts-theme-settings-header] > span {
113
- display: grid;
114
- gap: 4px;
100
+ display: grid;
101
+ gap: 4px;
115
102
  }
116
-
117
103
  html[data-dsh-prts] [data-prts-theme-settings-header] small,
118
104
  html[data-dsh-prts] [data-prts-theme-settings] section > header small,
119
105
  html[data-dsh-prts] [data-prts-theme-settings] summary small,
120
106
  html[data-dsh-prts] [data-prts-settings-actions] small {
121
- color: var(--prts-muted);
122
- font: 700 8px/1.3 var(--prts-mono);
123
- letter-spacing: .08em;
107
+ color: var(--prts-muted);
108
+ font: 700 8px/1.3 var(--prts-mono);
109
+ letter-spacing: .08em;
124
110
  }
125
-
126
111
  html[data-dsh-prts] [data-prts-theme-settings-header] strong {
127
- font: 800 19px/1 var(--prts-display);
128
- letter-spacing: .07em;
112
+ font: 800 19px/1 var(--prts-display);
113
+ letter-spacing: .07em;
129
114
  }
130
115
  html[data-dsh-prts] [data-prts-settings-summary] {
131
- display: flex;
132
- flex-wrap: wrap;
133
- justify-content: flex-end;
134
- gap: 6px;
116
+ display: flex;
117
+ flex-wrap: wrap;
118
+ justify-content: flex-end;
119
+ gap: 6px;
135
120
  }
136
-
137
121
  html[data-dsh-prts] [data-prts-settings-summary] span {
138
- min-height: 22px;
139
- padding: 4px 7px;
140
- box-shadow: inset 0 0 0 1px var(--prts-line);
141
- background: color-mix(in srgb, var(--prts-panel-raised) 86%, transparent);
142
- color: var(--prts-cyan);
143
- font: 700 8px/1 var(--prts-mono);
144
- clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
145
- }
146
-
122
+ min-height: 22px;
123
+ padding: 4px 7px;
124
+ box-shadow: inset 0 0 0 1px var(--prts-line);
125
+ background: color-mix(in srgb, var(--prts-panel-raised) 86%, transparent);
126
+ color: var(--prts-cyan);
127
+ font: 700 8px/1 var(--prts-mono);
128
+ clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
129
+ }
147
130
  html[data-dsh-prts] [data-prts-theme-settings-close] {
148
- position: absolute;
149
- z-index: 5;
150
- top: 13px;
151
- right: 13px;
152
- width: 36px;
153
- height: 36px;
154
- color: var(--prts-ink);
155
- }
156
-
131
+ position: absolute;
132
+ z-index: 5;
133
+ top: 13px;
134
+ right: 13px;
135
+ width: 36px;
136
+ height: 36px;
137
+ color: var(--prts-ink);
138
+ }
157
139
  html[data-dsh-prts] [data-prts-theme-settings-scroll] {
158
- min-height: 0;
159
- overflow-y: auto;
160
- padding: 12px;
161
- scrollbar-gutter: stable;
140
+ min-height: 0;
141
+ overflow-y: auto;
142
+ padding: 12px;
143
+ scrollbar-gutter: stable;
162
144
  }
163
-
164
145
  html[data-dsh-prts] [data-prts-settings-presets],
165
146
  html[data-dsh-prts] [data-prts-settings-common],
166
147
  html[data-dsh-prts] [data-prts-settings-advanced],
167
148
  html[data-dsh-prts] [data-prts-settings-actions] {
168
- position: relative;
169
- margin: 0;
170
- overflow: hidden;
171
- border: 0;
172
- border-bottom: 1px solid var(--prts-line-strong);
173
- background: color-mix(in srgb, var(--prts-canvas-elevated) 82%, transparent);
174
- clip-path: none;
175
- }
176
-
149
+ position: relative;
150
+ margin: 0;
151
+ overflow: hidden;
152
+ border: 0;
153
+ border-bottom: 1px solid var(--prts-line-strong);
154
+ background: color-mix(in srgb, var(--prts-canvas-elevated) 82%, transparent);
155
+ clip-path: none;
156
+ }
177
157
  html[data-dsh-prts] [data-prts-settings-presets] > header,
178
158
  html[data-dsh-prts] [data-prts-settings-common] > header {
179
- min-height: 42px;
180
- display: flex;
181
- align-items: center;
182
- justify-content: space-between;
183
- gap: 12px;
184
- padding: 9px 11px;
185
- border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 72%, transparent);
186
- }
187
-
159
+ min-height: 42px;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: space-between;
163
+ gap: 12px;
164
+ padding: 9px 11px;
165
+ border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 72%, transparent);
166
+ }
188
167
  html[data-dsh-prts] [data-prts-settings-presets] > header span,
189
168
  html[data-dsh-prts] [data-prts-settings-common] > header span,
190
169
  html[data-dsh-prts] [data-prts-settings-advanced] > [data-prts-section-heading] > span {
191
- display: flex;
192
- align-items: baseline;
193
- gap: 9px;
170
+ display: flex;
171
+ align-items: baseline;
172
+ gap: 9px;
194
173
  }
195
-
196
174
  html[data-dsh-prts] [data-prts-settings-presets] > header strong,
197
175
  html[data-dsh-prts] [data-prts-settings-common] > header strong,
198
176
  html[data-dsh-prts] [data-prts-settings-advanced] > [data-prts-section-heading] strong {
199
- font: 800 13px/1 var(--prts-display);
200
- letter-spacing: .05em;
177
+ font: 800 13px/1 var(--prts-display);
178
+ letter-spacing: .05em;
201
179
  }
202
-
203
180
  html[data-dsh-prts] [data-prts-advanced-summary] {
204
- pointer-events: none;
205
- color: var(--prts-cyan);
206
- font: 800 8px/1 var(--prts-mono);
207
- letter-spacing: .06em;
181
+ pointer-events: none;
182
+ color: var(--prts-cyan);
183
+ font: 800 8px/1 var(--prts-mono);
184
+ letter-spacing: .06em;
208
185
  }
209
186
  html[data-dsh-prts] [data-prts-settings-presets],
210
187
  html[data-dsh-prts] [data-prts-settings-common],
211
188
  html[data-dsh-prts] [data-prts-settings-advanced],
212
189
  html[data-dsh-prts] [data-prts-settings-actions] {
213
- border-inline: 1px solid var(--prts-line-strong);
190
+ border-inline: 1px solid var(--prts-line-strong);
214
191
  }
215
192
  html[data-dsh-prts] [data-prts-settings-presets] { border-top: 1px solid var(--prts-line-strong); }
216
-
217
193
  html[data-dsh-prts] [data-prts-settings-presets] > div {
218
- display: grid;
219
- grid-template-columns: repeat(3, minmax(0, 1fr));
220
- gap: 0;
221
- padding: 0;
194
+ display: grid;
195
+ grid-template-columns: repeat(3, minmax(0, 1fr));
196
+ gap: 0;
197
+ padding: 0;
222
198
  }
223
-
224
199
  html[data-dsh-prts] [data-prts-preset-card] {
225
- display: grid;
226
- text-align: left;
227
- min-height: 66px;
228
- align-content: center;
229
- gap: 6px;
230
- padding: 11px 12px !important;
231
- border-right: 1px solid var(--prts-line) !important;
232
- position: relative;
233
- overflow: hidden;
234
- box-shadow: none;
235
- background: transparent !important;
236
- clip-path: none;
237
- }
238
-
200
+ display: grid;
201
+ text-align: left;
202
+ min-height: 66px;
203
+ align-content: center;
204
+ gap: 6px;
205
+ padding: 11px 12px !important;
206
+ border-right: 1px solid var(--prts-line) !important;
207
+ position: relative;
208
+ overflow: hidden;
209
+ box-shadow: none;
210
+ background: transparent !important;
211
+ clip-path: none;
212
+ }
239
213
  html[data-dsh-prts] [data-prts-preset-card]:last-child { border-right: 0 !important; }
240
214
  html[data-dsh-prts] [data-prts-preset-card] strong { font-size: 12px; }
241
215
  html[data-dsh-prts] [data-prts-preset-card] span { overflow: hidden; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
242
216
  html[data-dsh-prts] [data-prts-preset-card].is-selected {
243
- box-shadow: inset 0 -2px 0 var(--prts-yellow);
244
- background: color-mix(in srgb, var(--prts-yellow) 9%, transparent) !important;
217
+ box-shadow: inset 0 -2px 0 var(--prts-yellow);
218
+ background: color-mix(in srgb, var(--prts-yellow) 9%, transparent) !important;
245
219
  }
246
-
247
220
  html[data-dsh-prts] [data-prts-settings-common-grid] {
248
- display: grid;
249
- grid-template-columns: repeat(2, minmax(0, 1fr));
221
+ display: grid;
222
+ grid-template-columns: repeat(2, minmax(0, 1fr));
250
223
  }
251
-
252
224
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
253
- min-height: 50px;
254
- grid-template-columns: 94px minmax(0, 1fr);
255
- align-items: center;
256
- gap: 8px;
257
- padding: 7px 10px;
258
- border-right: 1px solid var(--prts-line);
259
- border-bottom: 1px solid var(--prts-line);
260
- }
261
-
225
+ min-height: 50px;
226
+ grid-template-columns: 94px minmax(0, 1fr);
227
+ align-items: center;
228
+ gap: 8px;
229
+ padding: 7px 10px;
230
+ border-right: 1px solid var(--prts-line);
231
+ border-bottom: 1px solid var(--prts-line);
232
+ }
262
233
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-child(2n) { border-right: 0; }
263
-
264
234
  html[data-dsh-prts] [data-prts-settings-common] :is(
265
- [data-prts-setting-row="sessionGlow"],
266
- [data-prts-setting-row="sessionFlowPalette"],
267
- [data-prts-setting-row="sessionFlowColors"],
268
- [data-prts-setting-row="sessionFlowSpeed"],
269
- [data-prts-setting-row="conversationStyle"]
235
+ [data-prts-setting-row="sessionGlow"],
236
+ [data-prts-setting-row="sessionFlowPalette"],
237
+ [data-prts-setting-row="sessionFlowColors"],
238
+ [data-prts-setting-row="sessionFlowSpeed"],
239
+ [data-prts-setting-row="conversationStyle"]
270
240
  ) {
271
- grid-column: 1 / -1;
272
- border-right: 0;
241
+ grid-column: 1 / -1;
242
+ border-right: 0;
273
243
  }
274
-
275
244
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="conversationStyle"] {
276
- border-bottom: 0;
245
+ border-bottom: 0;
277
246
  }
278
-
279
247
  html[data-dsh-prts] [data-prts-setting-row] > div {
280
- min-width: 0;
281
- display: flex;
282
- gap: 4px;
248
+ min-width: 0;
249
+ display: flex;
250
+ gap: 4px;
283
251
  }
284
-
285
252
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] > span {
286
- min-width: 0;
287
- display: grid;
288
- gap: 3px;
253
+ min-width: 0;
254
+ display: grid;
255
+ gap: 3px;
289
256
  }
290
-
291
257
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] > span > strong {
292
- font: 700 9px/1.1 var(--prts-display);
258
+ font: 700 9px/1.1 var(--prts-display);
293
259
  }
294
-
295
260
  html[data-dsh-prts] [data-prts-setting-note] {
296
- color: var(--prts-yellow);
297
- font: 700 7px/1.25 var(--prts-mono);
298
- letter-spacing: 0;
261
+ color: var(--prts-yellow);
262
+ font: 700 7px/1.25 var(--prts-mono);
263
+ letter-spacing: 0;
299
264
  }
300
-
301
265
  html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] {
302
- min-width: 0;
303
- flex: 1 1 0;
304
- display: inline-flex;
305
- align-items: center;
306
- justify-content: center;
307
- gap: 5px;
308
- }
309
-
266
+ min-width: 0;
267
+ flex: 1 1 0;
268
+ display: inline-flex;
269
+ align-items: center;
270
+ justify-content: center;
271
+ gap: 5px;
272
+ }
310
273
  html[data-dsh-prts] [data-prts-setting-row="sessionFlowPalette"] > div { flex-wrap: wrap; }
311
274
  html[data-dsh-prts] [data-prts-setting-row="sessionFlowPalette"] button[data-prts-setting-key] { flex-basis: 98px; }
312
-
313
275
  html[data-dsh-prts] [data-prts-option-sample] {
314
- position: relative;
315
- width: 22px;
316
- height: 14px;
317
- flex: 0 0 22px;
318
- overflow: hidden;
319
- border: 1px solid color-mix(in srgb, currentColor 45%, var(--prts-line));
320
- background: var(--prts-canvas);
321
- }
322
-
276
+ position: relative;
277
+ width: 22px;
278
+ height: 14px;
279
+ flex: 0 0 22px;
280
+ overflow: hidden;
281
+ border: 1px solid color-mix(in srgb, currentColor 45%, var(--prts-line));
282
+ background: var(--prts-canvas);
283
+ }
323
284
  html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="off"] {
324
- background: linear-gradient(var(--prts-line), var(--prts-line)) 50% 50% / 12px 1px no-repeat, var(--prts-canvas);
285
+ background: linear-gradient(var(--prts-line), var(--prts-line)) 50% 50% / 12px 1px no-repeat, var(--prts-canvas);
325
286
  }
326
287
  html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="restrained"] {
327
- background: repeating-linear-gradient(115deg, var(--prts-canvas) 0 6px, color-mix(in srgb, var(--prts-cyan) 38%, var(--prts-canvas)) 6px 7px);
288
+ background: repeating-linear-gradient(115deg, var(--prts-canvas) 0 6px, color-mix(in srgb, var(--prts-cyan) 38%, var(--prts-canvas)) 6px 7px);
328
289
  }
329
290
  html[data-dsh-prts] [data-prts-option-sample="texture"][data-prts-option-sample-value="full"] {
330
- background:
331
- repeating-linear-gradient(115deg, transparent 0 4px, color-mix(in srgb, var(--prts-cyan) 62%, transparent) 4px 5px),
332
- repeating-linear-gradient(25deg, var(--prts-canvas) 0 7px, color-mix(in srgb, var(--prts-line-strong) 72%, var(--prts-canvas)) 7px 8px);
291
+ background:
292
+ repeating-linear-gradient(115deg, transparent 0 4px, color-mix(in srgb, var(--prts-cyan) 62%, transparent) 4px 5px),
293
+ repeating-linear-gradient(25deg, var(--prts-canvas) 0 7px, color-mix(in srgb, var(--prts-line-strong) 72%, var(--prts-canvas)) 7px 8px);
333
294
  }
334
-
335
295
  html[data-dsh-prts] [data-prts-option-sample="glass"] {
336
- background:
337
- linear-gradient(135deg, color-mix(in srgb, var(--prts-cyan) 54%, transparent) 25%, transparent 25%) 0 0 / 8px 8px,
338
- linear-gradient(315deg, color-mix(in srgb, var(--prts-yellow) 38%, transparent) 25%, transparent 25%) 4px 4px / 8px 8px,
339
- var(--prts-canvas);
296
+ background:
297
+ linear-gradient(135deg, color-mix(in srgb, var(--prts-cyan) 54%, transparent) 25%, transparent 25%) 0 0 / 8px 8px,
298
+ linear-gradient(315deg, color-mix(in srgb, var(--prts-yellow) 38%, transparent) 25%, transparent 25%) 4px 4px / 8px 8px,
299
+ var(--prts-canvas);
340
300
  }
341
301
  html[data-dsh-prts] [data-prts-option-sample="glass"]::after {
342
- content: "";
343
- position: absolute;
344
- inset: 0;
345
- background: color-mix(in srgb, var(--prts-panel-raised) 64%, transparent);
346
- backdrop-filter: blur(2px) saturate(1.15);
347
- -webkit-backdrop-filter: blur(2px) saturate(1.15);
302
+ content: "";
303
+ position: absolute;
304
+ inset: 0;
305
+ background: color-mix(in srgb, var(--prts-panel-raised) 64%, transparent);
306
+ backdrop-filter: blur(2px) saturate(1.15);
307
+ -webkit-backdrop-filter: blur(2px) saturate(1.15);
348
308
  }
349
309
  html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="off"]::after { background: var(--prts-panel-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
350
310
  html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="soft"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 82%, transparent); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
351
311
  html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="standard"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 62%, transparent); }
352
312
  html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="clear"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 34%, transparent); backdrop-filter: blur(4px) saturate(1.35); -webkit-backdrop-filter: blur(4px) saturate(1.35); }
353
-
354
313
  html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"] {
355
- border: 0;
356
- background: linear-gradient(90deg, #f7ddeb 0 33%, #65ddb0 33% 66%, #6eb7f3 66%);
357
- clip-path: polygon(0 40%, 24% 18%, 48% 54%, 72% 24%, 100% 46%, 100% 68%, 72% 46%, 48% 76%, 24% 40%, 0 62%);
314
+ border: 0;
315
+ background: linear-gradient(90deg, #f7ddeb 0 33%, #65ddb0 33% 66%, #6eb7f3 66%);
316
+ clip-path: polygon(0 40%, 24% 18%, 48% 54%, 72% 24%, 100% 46%, 100% 68%, 72% 46%, 48% 76%, 24% 40%, 0 62%);
358
317
  }
359
318
  html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="rhodes"] { background: linear-gradient(90deg, #b9edf4 0 33%, #5ccddb 33% 66%, #5a9ee6 66%); }
360
319
  html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="amber"] { background: linear-gradient(90deg, #ffe6a3 0 33%, #f0c800 33% 66%, #ee8f42 66%); }
361
320
  html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="alert"] { background: linear-gradient(90deg, #ffc0b8 0 33%, #ee625a 33% 66%, #db5b8c 66%); }
362
321
  html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="custom"] { background: linear-gradient(90deg, #d95785 0 33%, #d0a900 33% 66%, #268fbd 66%); }
363
-
364
322
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] {
365
- align-items: stretch;
366
- padding-block: 9px;
323
+ align-items: stretch;
324
+ padding-block: 9px;
367
325
  }
368
-
369
326
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] {
370
- display: grid;
371
- grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr);
372
- align-items: center;
373
- gap: 10px;
327
+ display: grid;
328
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
329
+ align-items: center;
330
+ gap: 10px;
374
331
  }
375
-
376
332
  html[data-dsh-prts] [data-prts-session-flow-preview] {
377
- --prts-lifeline-pink: #f7ddeb;
378
- --prts-lifeline-green: #65ddb0;
379
- --prts-lifeline-blue: #6eb7f3;
380
- width: 100%;
381
- height: 54px;
382
- display: block;
383
- overflow: visible;
384
- border: 1px solid var(--prts-line);
385
- background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
386
- }
387
-
333
+ --prts-lifeline-pink: #f7ddeb;
334
+ --prts-lifeline-green: #65ddb0;
335
+ --prts-lifeline-blue: #6eb7f3;
336
+ width: 100%;
337
+ height: 54px;
338
+ display: block;
339
+ overflow: visible;
340
+ border: 1px solid var(--prts-line);
341
+ background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
342
+ }
388
343
  html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="rhodes"] { --prts-lifeline-pink: #b9edf4; --prts-lifeline-green: #5ccddb; --prts-lifeline-blue: #5a9ee6; }
389
344
  html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="amber"] { --prts-lifeline-pink: #ffe6a3; --prts-lifeline-green: #f0c800; --prts-lifeline-blue: #ee8f42; }
390
345
  html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="alert"] { --prts-lifeline-pink: #ffc0b8; --prts-lifeline-green: #ee625a; --prts-lifeline-blue: #db5b8c; }
391
346
  html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="custom"] { --prts-lifeline-pink: var(--prts-session-flow-back); --prts-lifeline-green: var(--prts-session-flow-core); --prts-lifeline-blue: var(--prts-session-flow-front); }
392
-
393
347
  html[data-dsh-prts] [data-prts-session-flow-preview-filament="back"] { --prts-preview-color: var(--prts-lifeline-pink); }
394
348
  html[data-dsh-prts] [data-prts-session-flow-preview-filament="core"] { --prts-preview-color: var(--prts-lifeline-green); }
395
349
  html[data-dsh-prts] [data-prts-session-flow-preview-filament="front"] { --prts-preview-color: var(--prts-lifeline-blue); }
@@ -402,428 +356,396 @@ html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview
402
356
  html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 18%, #fff); stroke-width: .72; opacity: .98; }
403
357
  html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="halo"] { stroke: color-mix(in srgb, var(--prts-preview-color) 42%, #fff); stroke-width: 5.5; opacity: .45; filter: blur(1.3px); }
404
358
  html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 58%, #fff); }
405
-
406
359
  html[data-dsh-prts] [data-prts-session-flow-color-inputs] {
407
- display: grid;
408
- grid-template-columns: repeat(3, minmax(0, 1fr));
409
- gap: 5px;
360
+ display: grid;
361
+ grid-template-columns: repeat(3, minmax(0, 1fr));
362
+ gap: 5px;
410
363
  }
411
364
  html[data-dsh-prts] [data-prts-session-flow-color-inputs] label { min-width: 0; display: grid; grid-template-columns: 34px minmax(34px, 1fr); gap: 4px; align-items: center; color: var(--prts-muted); font: 700 8px/1 var(--prts-mono); }
412
365
  html[data-dsh-prts] [data-prts-session-flow-color-inputs] input[type="color"] { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--prts-line); border-radius: 0; background: var(--prts-panel-raised); cursor: pointer; }
413
366
  html[data-dsh-prts] [data-prts-session-flow-color-inputs] output { grid-column: 1 / -1; color: var(--prts-ink); font: 700 8px/1 var(--prts-mono); text-align: center; text-transform: uppercase; }
414
-
415
367
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key],
416
368
  html[data-dsh-prts] [data-prts-retry-save],
417
369
  html[data-dsh-prts] [data-prts-reset-visual],
418
370
  html[data-dsh-prts] [data-prts-reset-confirm-action],
419
371
  html[data-dsh-prts] [data-prts-reset-cancel] {
420
- position: relative;
421
- overflow: hidden;
422
- min-height: 30px;
423
- padding: 6px 8px;
424
- border: 0 !important;
425
- box-shadow: inset 0 0 0 1px var(--prts-line);
426
- background: var(--prts-panel-raised);
427
- color: var(--prts-muted);
428
- font: 700 8px/1 var(--prts-mono);
429
- white-space: nowrap;
430
- clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
431
- }
432
-
372
+ position: relative;
373
+ overflow: hidden;
374
+ min-height: 30px;
375
+ padding: 6px 8px;
376
+ border: 0 !important;
377
+ box-shadow: inset 0 0 0 1px var(--prts-line);
378
+ background: var(--prts-panel-raised);
379
+ color: var(--prts-muted);
380
+ font: 700 8px/1 var(--prts-mono);
381
+ white-space: nowrap;
382
+ clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
383
+ }
433
384
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key].is-selected {
434
- box-shadow: inset 0 0 0 1px var(--prts-yellow);
435
- background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel-raised));
436
- color: var(--prts-ink);
437
-
385
+ box-shadow: inset 0 0 0 1px var(--prts-yellow);
386
+ background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel-raised));
387
+ color: var(--prts-ink);
438
388
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key]::after {
439
- content: "";
440
- position: absolute;
441
- z-index: 3;
442
- inset: 0;
443
- opacity: 0;
444
- box-shadow: inset 0 0 0 1px var(--prts-yellow);
445
- background: color-mix(in srgb, var(--prts-yellow) 18%, transparent);
446
- pointer-events: none;
447
- }
448
-
389
+ content: "";
390
+ position: absolute;
391
+ z-index: 3;
392
+ inset: 0;
393
+ opacity: 0;
394
+ box-shadow: inset 0 0 0 1px var(--prts-yellow);
395
+ background: color-mix(in srgb, var(--prts-yellow) 18%, transparent);
396
+ pointer-events: none;
397
+ }
449
398
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key][data-prts-setting-feedback]::after {
450
- opacity: 1;
399
+ opacity: 1;
451
400
  }
452
-
453
401
  }
454
-
455
402
  html[data-dsh-prts] [data-prts-theme-settings] button:focus-visible,
456
403
  html[data-dsh-prts] [data-prts-theme-settings] summary:focus-visible,
457
404
  html[data-dsh-prts] [data-prts-theme-settings] input:focus-visible {
458
- outline: 2px solid var(--prts-cyan);
459
- outline-offset: 2px;
405
+ outline: 2px solid var(--prts-cyan);
406
+ outline-offset: 2px;
460
407
  }
461
-
462
408
  html[data-dsh-prts] [data-prts-settings-advanced] > [data-prts-section-heading] {
463
- min-height: 52px;
464
- display: flex;
465
- align-items: center;
466
- justify-content: space-between;
467
- gap: 12px;
468
- padding: 11px;
469
- list-style: none;
470
- }
471
-
409
+ min-height: 52px;
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: space-between;
413
+ gap: 12px;
414
+ padding: 11px;
415
+ list-style: none;
416
+ }
472
417
  html[data-dsh-prts] [data-prts-settings-advanced-content] {
473
- display: grid;
474
- grid-template-columns: minmax(0, 1fr);
475
- border-top: 1px solid var(--prts-line-strong);
418
+ display: grid;
419
+ grid-template-columns: minmax(0, 1fr);
420
+ border-top: 1px solid var(--prts-line-strong);
476
421
  }
477
-
478
422
  html[data-dsh-prts] [data-prts-settings-advanced-content] > section { padding: 11px; }
479
423
  html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 1px solid var(--prts-line); }
480
424
  html[data-dsh-prts] [data-prts-settings-advanced-content] section > header { min-height: 30px; display: grid; gap: 4px; }
481
425
  html[data-dsh-prts] [data-prts-settings-advanced-content] section > header strong { font-size: 10px; }
482
426
  html[data-dsh-prts] [data-prts-settings-advanced-content] section > header span { color: var(--prts-muted); font-size: 8px; }
483
-
484
427
  html[data-dsh-prts] [data-prts-particle-detail] > div {
485
- display: grid;
486
- grid-template-columns: repeat(3, minmax(0, 1fr));
487
- gap: 5px;
488
- margin-top: 8px;
428
+ display: grid;
429
+ grid-template-columns: repeat(3, minmax(0, 1fr));
430
+ gap: 5px;
431
+ margin-top: 8px;
489
432
  }
490
-
491
433
  html[data-dsh-prts] [data-prts-particle-detail] button[role="radio"] {
492
- min-width: 0;
493
- display: grid;
494
- gap: 5px;
434
+ min-width: 0;
435
+ display: grid;
436
+ gap: 5px;
495
437
  }
496
438
  html[data-dsh-prts] [data-prts-particle-detail-preview] {
497
- height: 32px;
498
- display: grid;
499
- grid-template-columns: repeat(6, 1fr);
500
- place-items: center;
501
- overflow: hidden;
502
- border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
439
+ height: 32px;
440
+ display: grid;
441
+ grid-template-columns: repeat(6, 1fr);
442
+ place-items: center;
443
+ overflow: hidden;
444
+ border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
503
445
  }
504
446
  html[data-dsh-prts] [data-prts-particle-detail-preview] b { width: 2px; height: 2px; background: currentColor; }
505
447
  html[data-dsh-prts] [data-prts-particle-traversal] {
506
- margin-top: 9px;
507
- padding-top: 9px;
508
- border-top: 1px solid var(--prts-line);
448
+ margin-top: 9px;
449
+ padding-top: 9px;
450
+ border-top: 1px solid var(--prts-line);
509
451
  }
510
452
  html[data-dsh-prts] [data-prts-particle-traversal] > span { display: grid; gap: 3px; }
511
453
  html[data-dsh-prts] [data-prts-particle-traversal] > span strong { font-size: 9px; }
512
454
  html[data-dsh-prts] [data-prts-particle-traversal] > span small {
513
- color: var(--prts-muted);
514
- font: 600 8px/1.35 var(--prts-mono);
455
+ color: var(--prts-muted);
456
+ font: 600 8px/1.35 var(--prts-mono);
515
457
  }
516
458
  html[data-dsh-prts] [data-prts-particle-traversal-output] {
517
- min-width: 132px;
518
- color: var(--prts-cyan);
519
- font: 800 8px/1.2 var(--prts-mono);
520
- text-align: right;
459
+ min-width: 132px;
460
+ color: var(--prts-cyan);
461
+ font: 800 8px/1.2 var(--prts-mono);
462
+ text-align: right;
521
463
  }
522
464
  html[data-dsh-prts] [data-prts-session-flow-speed-output] {
523
- min-width: 64px;
524
- color: var(--prts-cyan);
525
- font: 800 8px/1.2 var(--prts-mono);
526
- text-align: right;
465
+ min-width: 64px;
466
+ color: var(--prts-cyan);
467
+ font: 800 8px/1.2 var(--prts-mono);
468
+ text-align: right;
527
469
  }
528
470
  html[data-dsh-prts] [data-prts-session-flow-speed] input[type="range"] { min-width: 120px; }
529
471
  html[data-dsh-prts] [data-prts-particle-error] { margin: 8px 0 0; color: var(--prts-yellow); font: 700 8px/1.4 var(--prts-mono); }
530
-
531
472
  html[data-dsh-prts] [data-prts-setting-range-row] {
532
- display: grid;
533
- gap: 7px;
534
- padding: 8px 0 0;
535
- border: 0;
473
+ display: grid;
474
+ gap: 7px;
475
+ padding: 8px 0 0;
476
+ border: 0;
536
477
  }
537
478
  html[data-dsh-prts] [data-prts-setting-range-row] > div {
538
- display: flex;
539
- align-items: center;
540
- gap: 8px;
479
+ display: flex;
480
+ align-items: center;
481
+ gap: 8px;
541
482
  }
542
483
  html[data-dsh-prts] [data-prts-setting-range-row] input[type="range"] {
543
- min-width: 0;
544
- flex: 1;
484
+ min-width: 0;
485
+ flex: 1;
545
486
  }
546
487
  html[data-dsh-prts] [data-prts-setting-range] { accent-color: var(--prts-cyan); }
547
488
  html[data-dsh-prts] [hidden] { display: none !important; }
548
-
549
489
  /* Readable settings typography: information never drops below 12px. */
550
490
  html[data-dsh-prts] :is(
551
- [data-prts-theme-settings-header] small,
552
- [data-prts-theme-settings] section > header small,
553
- [data-prts-theme-settings] summary small,
554
- [data-prts-settings-actions] small,
555
- [data-prts-settings-summary] span,
556
- [data-prts-advanced-summary],
557
- [data-prts-preset-card] span,
558
- [data-prts-setting-note],
559
- [data-prts-settings-advanced-content] section > header span,
560
- [data-prts-particle-error],
561
- [data-prts-reset-confirm]
491
+ [data-prts-theme-settings-header] small,
492
+ [data-prts-theme-settings] section > header small,
493
+ [data-prts-theme-settings] summary small,
494
+ [data-prts-settings-actions] small,
495
+ [data-prts-settings-summary] span,
496
+ [data-prts-advanced-summary],
497
+ [data-prts-preset-card] span,
498
+ [data-prts-setting-note],
499
+ [data-prts-settings-advanced-content] section > header span,
500
+ [data-prts-particle-error],
501
+ [data-prts-reset-confirm]
562
502
  ) {
563
- font-size: var(--prts-settings-small);
564
- line-height: 1.4;
503
+ font-size: var(--prts-settings-small);
504
+ line-height: 1.4;
565
505
  }
566
-
567
506
  html[data-dsh-prts] :is(
568
- [data-prts-settings-presets] > header strong,
569
- [data-prts-settings-common] > header strong,
570
- [data-prts-settings-advanced] > [data-prts-section-heading] strong,
571
- [data-prts-preset-card] strong,
572
- [data-prts-settings-common] [data-prts-setting-row] > span > strong,
573
- [data-prts-settings-advanced-content] section > header strong,
574
- [data-prts-theme-settings] button[data-prts-setting-key],
575
- [data-prts-retry-save],
576
- [data-prts-reset-visual],
577
- [data-prts-reset-confirm-action],
578
- [data-prts-reset-cancel]
507
+ [data-prts-settings-presets] > header strong,
508
+ [data-prts-settings-common] > header strong,
509
+ [data-prts-settings-advanced] > [data-prts-section-heading] strong,
510
+ [data-prts-preset-card] strong,
511
+ [data-prts-settings-common] [data-prts-setting-row] > span > strong,
512
+ [data-prts-settings-advanced-content] section > header strong,
513
+ [data-prts-theme-settings] button[data-prts-setting-key],
514
+ [data-prts-retry-save],
515
+ [data-prts-reset-visual],
516
+ [data-prts-reset-confirm-action],
517
+ [data-prts-reset-cancel]
579
518
  ) {
580
- font-size: var(--prts-settings-text);
581
- line-height: 1.25;
519
+ font-size: var(--prts-settings-text);
520
+ line-height: 1.25;
582
521
  }
583
-
584
522
  html[data-dsh-prts] [data-prts-theme-settings-header] strong {
585
- font-size: 1.375rem;
586
- line-height: 1.1;
523
+ font-size: 1.375rem;
524
+ line-height: 1.1;
587
525
  }
588
-
589
526
  html[data-dsh-prts] [data-prts-settings-summary] span {
590
- min-height: 28px;
591
- padding: 6px 9px;
527
+ min-height: 28px;
528
+ padding: 6px 9px;
592
529
  }
593
-
594
530
  html[data-dsh-prts] [data-prts-preset-card] {
595
- min-height: 84px;
531
+ min-height: 84px;
596
532
  }
597
-
598
533
  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
599
- min-height: 72px;
600
- grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
534
+ min-height: 72px;
535
+ grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
601
536
  }
602
-
603
537
  html[data-dsh-prts] :is(
604
- [data-prts-theme-settings] button[data-prts-setting-key],
605
- [data-prts-retry-save],
606
- [data-prts-reset-visual],
607
- [data-prts-reset-confirm-action],
608
- [data-prts-reset-cancel]
538
+ [data-prts-theme-settings] button[data-prts-setting-key],
539
+ [data-prts-retry-save],
540
+ [data-prts-reset-visual],
541
+ [data-prts-reset-confirm-action],
542
+ [data-prts-reset-cancel]
609
543
  ) {
610
- min-height: 40px;
611
- padding: 8px 10px;
544
+ min-height: 40px;
545
+ padding: 8px 10px;
612
546
  }
613
-
614
547
  @container prts-settings (max-width: 52rem) {
615
- html[data-dsh-prts] [data-prts-settings-common-grid],
616
- html[data-dsh-prts] [data-prts-settings-advanced-content] {
617
- grid-template-columns: minmax(0, 1fr);
618
- }
619
-
620
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
621
- border-right: 0;
622
- }
623
-
624
- html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section {
625
- border-left: 0;
626
- border-top: 1px solid var(--prts-line);
627
- }
628
- }
629
-
548
+ html[data-dsh-prts] [data-prts-settings-common-grid],
549
+ html[data-dsh-prts] [data-prts-settings-advanced-content] {
550
+ grid-template-columns: minmax(0, 1fr);
551
+ }
552
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
553
+ border-right: 0;
554
+ }
555
+ html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section {
556
+ border-left: 0;
557
+ border-top: 1px solid var(--prts-line);
558
+ }
559
+ }
630
560
  @media (max-height: 820px) and (min-width: 721px) {
631
- html[data-dsh-prts] [data-prts-theme-settings-header] { min-height: 60px; padding-block: 10px; }
632
- html[data-dsh-prts] [data-prts-theme-settings-close] { top: 10px; }
561
+ html[data-dsh-prts] [data-prts-theme-settings-header] { min-height: 60px; padding-block: 10px; }
562
+ html[data-dsh-prts] [data-prts-theme-settings-close] { top: 10px; }
633
563
  }
634
-
635
564
  @media (max-width: 720px) {
636
- html[data-dsh-prts] [data-prts-theme-settings] {
637
- inset: 0;
638
- width: 100vw;
639
- height: 100dvh;
640
- max-height: none;
641
- margin: 0;
642
- transform: translateY(10px);
643
- }
644
-
645
- html[data-dsh-prts] [data-prts-theme-settings][data-prts-settings-visible] { transform: translateY(0); }
646
- html[data-dsh-prts] [data-prts-settings-frame] { height: 100%; max-height: none; clip-path: none; border: 0; }
647
- html[data-dsh-prts] [data-prts-settings-frame]::before { right: 0; }
648
- html[data-dsh-prts] [data-prts-theme-settings-header] { grid-template-columns: minmax(0, 1fr); padding: 12px 48px 11px 13px; }
649
- html[data-dsh-prts] [data-prts-settings-summary] { display: none; }
650
- html[data-dsh-prts] [data-prts-theme-settings-scroll] { padding: 8px; scrollbar-gutter: auto; }
651
- html[data-dsh-prts] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
652
- html[data-dsh-prts] [data-prts-preset-card] { min-height: 54px; border-right: 0 !important; border-bottom: 1px solid var(--prts-line) !important; }
653
- html[data-dsh-prts] [data-prts-preset-card]:last-child { border-bottom: 0 !important; }
654
- html[data-dsh-prts] [data-prts-settings-common-grid] { grid-template-columns: minmax(0, 1fr); }
655
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { min-height: 62px; }
656
- html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] { min-height: 40px; }
657
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { border-right: 0; border-bottom: 1px solid var(--prts-line); }
658
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] { grid-template-columns: minmax(0, 1fr); }
659
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2),
660
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(3) { border-bottom: 1px solid var(--prts-line); }
661
- html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
662
- html[data-dsh-prts] [data-prts-settings-advanced-content] { grid-template-columns: minmax(0, 1fr); }
663
- html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 0; border-top: 1px solid var(--prts-line); }
664
- html[data-dsh-prts] [data-prts-reset-zone] { align-items: flex-start; flex-direction: column; }
665
- html[data-dsh-prts] [data-prts-reset-confirm] { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
666
- }
667
-
565
+ html[data-dsh-prts] [data-prts-theme-settings] {
566
+ inset: 0;
567
+ width: 100vw;
568
+ height: 100dvh;
569
+ max-height: none;
570
+ margin: 0;
571
+ transform: translateY(10px);
572
+ }
573
+ html[data-dsh-prts] [data-prts-theme-settings][data-prts-settings-visible] { transform: translateY(0); }
574
+ html[data-dsh-prts] [data-prts-settings-frame] { height: 100%; max-height: none; clip-path: none; border: 0; }
575
+ html[data-dsh-prts] [data-prts-settings-frame]::before { right: 0; }
576
+ html[data-dsh-prts] [data-prts-theme-settings-header] { grid-template-columns: minmax(0, 1fr); padding: 12px 48px 11px 13px; }
577
+ html[data-dsh-prts] [data-prts-settings-summary] { display: none; }
578
+ html[data-dsh-prts] [data-prts-theme-settings-scroll] { padding: 8px; scrollbar-gutter: auto; }
579
+ html[data-dsh-prts] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
580
+ html[data-dsh-prts] [data-prts-preset-card] { min-height: 54px; border-right: 0 !important; border-bottom: 1px solid var(--prts-line) !important; }
581
+ html[data-dsh-prts] [data-prts-preset-card]:last-child { border-bottom: 0 !important; }
582
+ html[data-dsh-prts] [data-prts-settings-common-grid] { grid-template-columns: minmax(0, 1fr); }
583
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { min-height: 62px; }
584
+ html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] { min-height: 40px; }
585
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { border-right: 0; border-bottom: 1px solid var(--prts-line); }
586
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] { grid-template-columns: minmax(0, 1fr); }
587
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2),
588
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(3) { border-bottom: 1px solid var(--prts-line); }
589
+ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
590
+ html[data-dsh-prts] [data-prts-settings-advanced-content] { grid-template-columns: minmax(0, 1fr); }
591
+ html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 0; border-top: 1px solid var(--prts-line); }
592
+ html[data-dsh-prts] [data-prts-reset-zone] { align-items: flex-start; flex-direction: column; }
593
+ html[data-dsh-prts] [data-prts-reset-confirm] { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
594
+ }
668
595
  @media (prefers-reduced-motion: no-preference) {
669
- html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key][data-prts-setting-feedback]::after {
670
- animation: prts-setting-feedback 300ms ease-out both;
671
- }
596
+ html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key][data-prts-setting-feedback]::after {
597
+ animation: prts-setting-feedback 300ms ease-out both;
598
+ }
672
599
  }
673
-
674
600
  @keyframes prts-setting-feedback {
675
- 0% { opacity: .82; }
676
- 100% { opacity: 0; }
601
+ 0% { opacity: .82; }
602
+ 100% { opacity: 0; }
677
603
  }
678
-
679
604
  @media (prefers-reduced-motion: reduce) {
680
- html[data-dsh-prts] [data-prts-theme-settings] { transition-duration: 1ms; }
605
+ html[data-dsh-prts] [data-prts-theme-settings] { transition-duration: 1ms; }
681
606
  }
682
-
683
607
  @media (prefers-reduced-transparency: reduce) {
684
- html[data-dsh-prts] [data-prts-theme-settings]::backdrop,
685
- html[data-dsh-prts] [data-prts-settings-backdrop] { background: color-mix(in srgb, var(--prts-canvas) 94%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
608
+ html[data-dsh-prts] [data-prts-theme-settings]::backdrop,
609
+ html[data-dsh-prts] [data-prts-settings-backdrop] { background: color-mix(in srgb, var(--prts-canvas) 94%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
686
610
  }
687
-
688
611
  html[data-dsh-prts] [data-prts-setting-row] > [data-prts-setting-switch] {
689
- justify-self: end;
612
+ justify-self: end;
690
613
  }
691
-
692
614
  /* Grouped settings: quiet surfaces, consistent rows, one accent. */
693
615
  html[data-dsh-prts] [data-prts-theme-settings] {
694
- width: min(clamp(56rem, 62vw, 68rem), calc(100vw - 3rem));
695
- height: min(48rem, calc(100dvh - 3rem));
696
- max-height: calc(100dvh - 3rem);
616
+ width: min(clamp(56rem, 62vw, 68rem), calc(100vw - 3rem));
617
+ height: min(48rem, calc(100dvh - 3rem));
618
+ max-height: calc(100dvh - 3rem);
697
619
  }
698
620
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame] {
699
- height: 100%;
700
- clip-path: none;
701
- border-radius: 8px;
702
- background: var(--prts-panel);
703
- border-color: color-mix(in srgb, var(--prts-line) 70%, transparent);
621
+ height: 100%;
622
+ clip-path: none;
623
+ border-radius: 8px;
624
+ background: var(--prts-panel);
625
+ border-color: color-mix(in srgb, var(--prts-line) 70%, transparent);
704
626
  }
705
627
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame]::before { content: none; }
706
628
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] {
707
- min-height: 88px;
708
- padding: 20px 72px 20px 28px;
709
- background: transparent;
710
- border-color: color-mix(in srgb, var(--prts-line) 60%, transparent);
629
+ min-height: 88px;
630
+ padding: 20px 72px 20px 28px;
631
+ background: transparent;
632
+ border-color: color-mix(in srgb, var(--prts-line) 60%, transparent);
711
633
  }
712
634
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] strong {
713
- font-size: 22px;
714
- letter-spacing: 0;
715
- line-height: 1.3;
635
+ font-size: 22px;
636
+ letter-spacing: 0;
637
+ line-height: 1.3;
716
638
  }
717
639
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] small { font-weight: 500; letter-spacing: .08em; }
718
640
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-close] { top: 25px; right: 22px; border-radius: 4px; background: transparent; }
719
641
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-summary] span {
720
- box-shadow: none;
721
- background: transparent;
722
- color: var(--prts-muted);
723
- clip-path: none;
724
- font-weight: 500;
642
+ box-shadow: none;
643
+ background: transparent;
644
+ color: var(--prts-muted);
645
+ clip-path: none;
646
+ font-weight: 500;
725
647
  }
726
648
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] {
727
- min-height: 0;
728
- display: grid;
729
- grid-template-columns: 148px minmax(0, 1fr);
649
+ min-height: 0;
650
+ display: grid;
651
+ grid-template-columns: 148px minmax(0, 1fr);
730
652
  }
731
653
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] {
732
- display: flex;
733
- flex-direction: column;
734
- gap: 6px;
735
- padding: 24px 14px;
736
- border-right: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
737
- background: color-mix(in srgb, var(--prts-canvas) 35%, var(--prts-panel));
654
+ display: flex;
655
+ flex-direction: column;
656
+ gap: 6px;
657
+ padding: 24px 14px;
658
+ border-right: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
659
+ background: color-mix(in srgb, var(--prts-canvas) 35%, var(--prts-panel));
738
660
  }
739
661
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump] {
740
- text-align: left;
741
- min-height: 42px;
742
- padding: 10px 14px;
743
- border: 0;
744
- border-radius: 4px;
745
- background: transparent;
746
- color: var(--prts-muted);
747
- font: 500 14px/1.4 var(--prts-body);
662
+ text-align: left;
663
+ min-height: 42px;
664
+ padding: 10px 14px;
665
+ border: 0;
666
+ border-radius: 4px;
667
+ background: transparent;
668
+ color: var(--prts-muted);
669
+ font: 500 14px/1.4 var(--prts-body);
748
670
  }
749
671
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump]:hover,
750
672
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump]:focus-visible {
751
- color: var(--prts-ink);
752
- background: var(--prts-panel-raised);
673
+ color: var(--prts-ink);
674
+ background: var(--prts-panel-raised);
753
675
  }
754
676
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { padding: 8px 28px 28px; }
755
677
  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common], [data-prts-settings-advanced], [data-prts-settings-actions]) {
756
- border: 0;
757
- background: transparent;
758
- overflow: visible;
759
- margin: 0 0 18px;
678
+ border: 0;
679
+ background: transparent;
680
+ overflow: visible;
681
+ margin: 0 0 18px;
760
682
  }
761
683
  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common]) > header {
762
- min-height: auto;
763
- padding: 24px 0 12px;
764
- border: 0;
684
+ min-height: auto;
685
+ padding: 24px 0 12px;
686
+ border: 0;
765
687
  }
766
688
  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-settings-presets], [data-prts-settings-common]) > header strong,
767
689
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-advanced] > [data-prts-section-heading] strong {
768
- font: 650 16px/1.5 var(--prts-body);
769
- letter-spacing: 0;
690
+ font: 650 16px/1.5 var(--prts-body);
691
+ letter-spacing: 0;
770
692
  }
771
693
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-presets] > div { gap: 8px; }
772
694
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] {
773
- min-height: 94px;
774
- padding: 14px !important;
775
- border: 1px solid var(--prts-line) !important;
776
- border-radius: 5px;
777
- box-shadow: none;
778
- gap: 8px;
695
+ min-height: 94px;
696
+ padding: 14px !important;
697
+ border: 1px solid var(--prts-line) !important;
698
+ border-radius: 5px;
699
+ box-shadow: none;
700
+ gap: 8px;
779
701
  }
780
702
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card].is-selected {
781
- border-color: var(--prts-yellow) !important;
782
- background: color-mix(in srgb, var(--prts-yellow) 7%, var(--prts-panel)) !important;
783
- box-shadow: none;
703
+ border-color: var(--prts-yellow) !important;
704
+ background: color-mix(in srgb, var(--prts-yellow) 7%, var(--prts-panel)) !important;
705
+ box-shadow: none;
784
706
  }
785
707
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] span {
786
- white-space: normal;
787
- color: var(--prts-muted);
788
- font-weight: 400;
789
- line-height: 1.6;
708
+ white-space: normal;
709
+ color: var(--prts-muted);
710
+ font-weight: 400;
711
+ line-height: 1.6;
790
712
  }
791
713
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common-grid] { grid-template-columns: minmax(0, 1fr); }
792
714
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row] {
793
- display: grid;
794
- grid-template-columns: minmax(150px, .85fr) minmax(0, 1.6fr);
795
- min-height: 76px;
796
- gap: 20px;
797
- padding: 16px 0;
798
- border: 0;
799
- border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
800
- align-items: center;
715
+ display: grid;
716
+ grid-template-columns: minmax(150px, .85fr) minmax(0, 1.6fr);
717
+ min-height: 76px;
718
+ gap: 20px;
719
+ padding: 16px 0;
720
+ border: 0;
721
+ border-bottom: 1px solid color-mix(in srgb, var(--prts-line) 45%, transparent);
722
+ align-items: center;
801
723
  }
802
724
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
803
725
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-note] {
804
- color: var(--prts-muted);
805
- font: 400 12px/1.65 var(--prts-body);
726
+ color: var(--prts-muted);
727
+ font: 400 12px/1.65 var(--prts-body);
806
728
  }
807
729
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-row] > span > strong { font-weight: 550; line-height: 1.5; }
808
730
  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-setting-row] > div { gap: 4px; }
809
731
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key]:not([data-prts-preset-card]) {
810
- border-radius: 4px;
811
- border: 1px solid transparent;
812
- background: var(--prts-panel-raised);
813
- color: var(--prts-muted);
814
- font-weight: 500;
815
- min-height: 40px;
816
- padding: 8px;
817
- box-shadow: none;
732
+ border-radius: 4px;
733
+ border: 1px solid transparent;
734
+ background: var(--prts-panel-raised);
735
+ color: var(--prts-muted);
736
+ font-weight: 500;
737
+ min-height: 40px;
738
+ padding: 8px;
739
+ box-shadow: none;
818
740
  }
819
741
  html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key].is-selected:not([data-prts-preset-card]) {
820
- background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel));
821
- border-color: color-mix(in srgb, var(--prts-yellow) 70%, transparent);
822
- color: var(--prts-ink);
742
+ background: color-mix(in srgb, var(--prts-yellow) 12%, var(--prts-panel));
743
+ border-color: color-mix(in srgb, var(--prts-yellow) 70%, transparent);
744
+ color: var(--prts-ink);
823
745
  }
824
746
  html[data-dsh-prts] [data-prts-theme-settings] {
825
747
  & [data-prts-setting-row="sessionFlowPalette"] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
826
- & [data-prts-setting-row="sessionFlowColors"] { grid-template-columns: minmax(0, 1fr); }
748
+ & [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] { grid-template-columns: minmax(0, 1fr); }
827
749
  & [data-prts-settings-advanced] { border-top: 1px solid var(--prts-line); }
828
750
  & [data-prts-settings-advanced] > [data-prts-section-heading] { padding: 22px 0; }
829
751
  & [data-prts-settings-section][hidden] { display: none !important; }
@@ -847,114 +769,96 @@ html[data-dsh-prts] [data-prts-theme-settings] {
847
769
  & [data-prts-reset-zone] { padding: 0; }
848
770
  }
849
771
  @media (max-width: 720px) {
850
- html[data-dsh-prts] [data-prts-theme-settings] { width: 100vw; height: 100dvh; max-height: none; }
851
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame] { border-radius: 0; }
852
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] { min-height: 76px; padding: 16px 58px 16px 20px; }
853
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-close] { top: 20px; right: 14px; }
854
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
855
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { flex-direction: row; padding: 8px 12px; gap: 0; border: 0; border-bottom: 1px solid var(--prts-line); }
856
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump] { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; white-space: nowrap; }
857
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { padding: 0 20px 24px; }
858
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
859
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] { min-height: 70px; }
860
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
861
- html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row]:has(> [data-prts-setting-switch]) { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
862
- }
863
-
772
+ html[data-dsh-prts] [data-prts-theme-settings] { width: 100vw; height: 100dvh; max-height: none; }
773
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-frame] { border-radius: 0; }
774
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-header] { min-height: 76px; padding: 16px 58px 16px 20px; }
775
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-close] { top: 20px; right: 14px; }
776
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
777
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { flex-direction: row; padding: 8px 12px; gap: 0; border: 0; border-bottom: 1px solid var(--prts-line); }
778
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-jump] { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; white-space: nowrap; }
779
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { padding: 0 20px 24px; }
780
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-presets] > div { grid-template-columns: minmax(0, 1fr); }
781
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-preset-card] { min-height: 70px; }
782
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
783
+ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row]:has(> [data-prts-setting-switch]) { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
784
+ }
864
785
  html[data-dsh-prts] [data-prts-theme-settings] {
865
- /* Four navigation destinations, each with one continuous settings surface. */
866
786
  & [data-prts-theme-settings-scroll] {
867
- padding: 20px 24px 28px;
868
- background: var(--prts-canvas);
787
+ padding: 20px 24px 28px;
788
+ background: var(--prts-canvas);
869
789
  }
870
790
  & [data-prts-settings-section] {
871
- margin: 0 0 28px;
872
- padding: 0 20px 8px;
873
- border: 1px solid var(--prts-line);
874
- border-radius: 6px;
875
- background: var(--prts-panel);
876
- scroll-margin-top: 16px;
791
+ margin: 0 0 28px;
792
+ padding: 0 20px 8px;
793
+ border: 1px solid var(--prts-line);
794
+ border-radius: 6px;
795
+ background: var(--prts-panel);
796
+ scroll-margin-top: 16px;
877
797
  }
878
798
  & [data-prts-settings-section] > [data-prts-section-heading] {
879
- display: flex;
880
- align-items: center;
881
- justify-content: space-between;
882
- gap: 12px;
883
- min-height: 76px;
884
- margin: 0 -20px 8px;
885
- padding: 18px 20px;
886
- border: 0;
887
- border-bottom: 1px solid var(--prts-line);
888
- border-radius: 5px 5px 0 0;
889
- background: var(--prts-panel-raised);
799
+ display: flex;
800
+ align-items: center;
801
+ justify-content: space-between;
802
+ gap: 12px;
803
+ min-height: 76px;
804
+ margin: 0 -20px 8px;
805
+ padding: 18px 20px;
806
+ border: 0;
807
+ border-bottom: 1px solid var(--prts-line);
808
+ border-radius: 5px 5px 0 0;
809
+ background: var(--prts-panel-raised);
890
810
  }
891
811
  & [data-prts-settings-section] > [data-prts-section-heading] > span {
892
- display: grid;
893
- gap: 5px;
812
+ display: grid;
813
+ gap: 5px;
894
814
  }
895
815
  & [data-prts-settings-section] > [data-prts-section-heading] strong {
896
- font: 650 18px/1.4 var(--prts-body);
897
- letter-spacing: 0;
816
+ font: 650 18px/1.4 var(--prts-body);
817
+ letter-spacing: 0;
898
818
  }
899
819
  & [data-prts-settings-section] > [data-prts-section-heading] small {
900
- color: var(--prts-muted);
901
- font: 400 12px/1.5 var(--prts-body);
820
+ color: var(--prts-muted);
821
+ font: 400 12px/1.5 var(--prts-body);
902
822
  }
903
823
  & [data-prts-settings-section="appearance"] > section {
904
- margin-bottom: 8px;
824
+ margin-bottom: 8px;
905
825
  }
906
826
  & [data-prts-settings-section="appearance"] > section > header {
907
- padding: 16px 0 10px;
827
+ padding: 16px 0 10px;
908
828
  }
909
829
  & [data-prts-settings-section="appearance"] > section > header strong {
910
- font-size: 13px;
911
- color: var(--prts-muted);
830
+ font-size: 13px;
831
+ color: var(--prts-muted);
912
832
  }
913
833
  & [data-prts-settings-jump][aria-selected="true"] {
914
- color: var(--prts-ink);
915
- background: var(--prts-panel-raised);
916
- box-shadow: inset 3px 0 var(--prts-yellow);
834
+ color: var(--prts-ink);
835
+ background: var(--prts-panel-raised);
836
+ box-shadow: inset 3px 0 var(--prts-yellow);
917
837
  }
918
838
  @media (max-width: 720px) {
919
- & [data-prts-theme-settings-scroll] { padding: 16px 12px 24px; }
920
- & [data-prts-settings-section] { padding-inline: 14px; margin-bottom: 24px; }
921
- & [data-prts-settings-section] > [data-prts-section-heading] { margin-inline: -14px; padding-inline: 14px; flex-wrap: wrap; gap: 4px 12px; }
922
- & [data-prts-settings-jump][aria-selected="true"] { box-shadow: inset 0 -3px var(--prts-yellow); }
839
+ & [data-prts-theme-settings-scroll] { padding: 16px 12px 24px; }
840
+ & [data-prts-settings-section] { padding-inline: 14px; margin-bottom: 24px; }
841
+ & [data-prts-settings-section] > [data-prts-section-heading] { margin-inline: -14px; padding-inline: 14px; flex-wrap: wrap; gap: 4px 12px; }
842
+ & [data-prts-settings-jump][aria-selected="true"] { box-shadow: inset 0 -3px var(--prts-yellow); }
923
843
  }
924
-
925
844
  & [data-prts-custom-emblem] {
926
- display: grid;
927
- gap: 14px;
928
- padding-block: 16px 24px;
929
- border-bottom: 1px solid var(--prts-line);
930
- margin-bottom: 20px;
845
+ display: grid;
846
+ gap: 14px;
847
+ padding-block: 16px 24px;
848
+ border-bottom: 1px solid var(--prts-line);
849
+ margin-bottom: 20px;
931
850
  }
932
851
  & [data-prts-custom-emblem] header { display: grid; gap: 6px; }
933
852
  & [data-prts-custom-emblem] :is(small, p) { font: 400 12px/1.6 var(--prts-body); color: var(--prts-muted); margin: 0; }
934
853
  & [data-prts-custom-emblem] label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; }
935
- & [data-prts-emblem-editor] { display: grid; gap: 14px; }
936
- & [data-prts-custom-emblem] :is(input,select) { min-width: 0; max-width: 100%; }
937
- & [data-prts-custom-emblem] select { padding: 8px; background: var(--prts-panel-raised); color: var(--prts-ink); border: 1px solid var(--prts-line); }
938
- & [data-prts-emblem-preview] { width: min(100%, 280px); height: auto; justify-self: center; border: 1px solid var(--prts-line); border-radius: 4px; }
939
- & [data-prts-emblem-actions] { display: flex; flex-wrap: wrap; gap: 10px; }
940
- & [data-prts-emblem-actions] button { padding: 10px 14px; border: 1px solid var(--prts-line); border-radius: 4px; color: var(--prts-ink); background: var(--prts-panel-raised); }
941
- & [data-prts-emblem-actions] button:disabled { opacity: .45; }
942
- & [data-prts-custom-emblem] h4 { margin: 8px 0 12px; font: 600 14px/1.5 var(--prts-body); }
943
- & [data-prts-emblem-list] { display: grid; gap: 10px; list-style: none; padding: 0; margin: 14px 0; }
944
- & :is([data-prts-emblem-list] > li, [data-prts-emblem-hero-row]) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid var(--prts-line); border-radius: 4px; }
945
- & :is([data-prts-emblem-list], [data-prts-emblem-hero-row]) canvas { width: 48px; height: 48px; flex: none; border-radius: 3px; }
946
- & :is([data-prts-emblem-list] > li, [data-prts-emblem-hero-row]) > span { flex: 1; min-width: 100px; overflow-wrap: anywhere; font-size: 13px; }
947
- & [data-emblem-action] { padding: 7px 10px; border: 1px solid var(--prts-line); border-radius: 4px; background: var(--prts-panel-raised); color: var(--prts-ink); }
948
- & [data-emblem-action]:disabled { opacity: .4; }
949
- & [data-prts-emblem-reorder] { padding: 0; border: 0; background: transparent; cursor: grab; }
950
- & [data-emblem-key] {user-select:none;-webkit-touch-callout:none}
951
- & [data-prts-emblem-reorder]:focus-visible { outline: 2px solid var(--prts-ink); outline-offset: 3px; }
952
- & [data-prts-emblem-sorting] { user-select: none; }
953
- & [data-prts-emblem-dragging] { opacity: .35; border-style: dashed !important; }
954
- & [data-prts-emblem-drag-ghost] { background: var(--prts-panel-raised); box-shadow: 0 8px 28px #0005; opacity: .95; }
955
- & [data-prts-emblem-workspace] { display: grid; gap: 14px; padding: 16px 0; border-top: 1px solid var(--prts-line); }
956
- @media (max-width:720px) {
957
- & [data-prts-emblem-list] [data-prts-emblem-actions] { flex-basis: 100%; gap: 5px; }
958
- }
959
-
960
- }
854
+ & [data-prts-emblem-editor]{display:grid;gap:14px;}& [data-prts-custom-emblem] :is(input,select){min-width:0;max-width:100%;}& [data-prts-custom-emblem] select{padding:8px;background:var(--prts-panel-raised);color:var(--prts-ink);border:1px solid var(--prts-line);}& [data-prts-emblem-preview]{touch-action:none;cursor:grab;width:min(100%,280px);height:auto;justify-self:center;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-actions]{display:flex;flex-wrap:wrap;gap:10px;}& [data-prts-emblem-actions] button{padding:10px 14px;border:1px solid var(--prts-line);border-radius:4px;color:var(--prts-ink);background:var(--prts-panel-raised);}& [data-prts-emblem-actions] button:disabled{opacity:.45;}& [data-prts-custom-emblem] h4{margin:8px 0 12px;font:600 14px/1.5 var(--prts-body);}& [data-prts-emblem-list]{display:grid;gap:10px;list-style:none;padding:0;margin:14px 0;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]){display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& :is([data-prts-emblem-list],[data-prts-emblem-hero-row]) canvas{width:48px;height:48px;flex:none;border-radius:3px;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]) > span{flex:1;min-width:100px;overflow-wrap:anywhere;font-size:13px;}& [data-emblem-action]{padding:7px 10px;border:1px solid var(--prts-line);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);}& [data-emblem-action]:disabled{opacity:.4;}& [data-prts-emblem-reorder]{padding:0;border:0;background:transparent;cursor:grab;}& [data-emblem-key]{touch-action:none;cursor:grab;user-select:none;-webkit-touch-callout:none}& [data-prts-emblem-reorder]:focus-visible{outline:2px solid var(--prts-ink);outline-offset:3px;}& [data-prts-emblem-sorting]{user-select:none;}& [data-prts-emblem-dragging]{opacity:.35;border-style:dashed !important;}& [data-prts-emblem-drag-ghost]{background:var(--prts-panel-raised);box-shadow:0 8px 28px #0005;opacity:.95;}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard]){position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--prts-line);border-radius:8px;background:var(--prts-panel-raised);color:var(--prts-ink);box-shadow:0 16px 64px #0008;font:13px/1.7 var(--prts-body);}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard])::backdrop{background:#0008;}& [data-prts-emblem-reset-confirm]{& > strong{display:block;font-size:16px;}& > p{margin:12px 0 18px;}& > [data-prts-emblem-actions]{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--prts-line);}& [data-prts-emblem-reset-cancel]{border:0;background:transparent;}& [data-emblem-action]{display:flex;gap:6px;padding:5px 10px;font-size:12px;background:transparent;}& [data-prts-emblem-reset-status]:empty{display:none;}}& [data-prts-emblem-reset-exports]{display:grid;gap:8px;margin:18px 0;}& [data-prts-emblem-reset-asset]{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-reset-asset] > span{overflow-wrap:anywhere;line-height:1.5;}& [data-prts-emblem-reset-asset] canvas{width:36px;height:36px;border-radius:3px;}& [data-prts-emblem-workspace]{width:min(820px,calc(100vw - 24px));padding:0;max-height:90dvh;}
855
+ & [data-prts-emblem-edit-header],& [data-prts-emblem-edit-bar]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;}
856
+ & [data-prts-emblem-edit-header]{border-bottom:1px solid var(--prts-line);}
857
+ & [data-prts-emblem-edit-header] button{border:0;background:none;color:inherit;font-size:22px;}
858
+ & [data-prts-emblem-edit-body]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:22px;overflow:auto;max-height:60dvh;}
859
+ & [data-prts-emblem-edit-preview]{display:grid;align-content:center;justify-items:center;background:var(--prts-canvas);border-radius:4px;min-height:240px;}
860
+ & [data-prts-emblem-edit-controls]{display:grid;gap:12px;min-width:0;}
861
+ & [data-prts-emblem-edit-bar]{border-top:1px solid var(--prts-line);flex-wrap:wrap;}
862
+ & [data-prts-emblem-edit-bar] [data-prts-emblem-actions]{margin-left:auto;}
863
+ @media(max-width:640px){& [data-prts-emblem-edit-body]{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;}& [data-prts-emblem-edit-preview]{min-height:180px;}& [data-prts-emblem-preview]{max-width:220px;}}
864
+ @media (max-width:720px){& [data-prts-emblem-list] [data-prts-emblem-actions]{flex-basis:100%;gap:5px;}}}