Hugging Face's logo

Spaces:
SharpMeow
/
unroll
Running

App Files Community
unroll
File size: 31,052 Bytes
97b9983
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
757768f
 
 
97b9983
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
757768f
97b9983
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13a1396
 
97b9983
 
1410d57
13a1396
97b9983
 
 
 
 
 
 
 
 
 
 
 
1410d57
97b9983
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0c79aed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
/* Control panel (ui.js). Loaded after style.css; every rule is scoped to body.ui2 so the page
   still looks as before if ui.js fails to run. */
body.ui2 {
  --ui-tap: 44px;
  --ui-r: 10px;
  --ui-bg: rgba(14, 12, 10, 0.86);
  --ui-btn: rgba(236, 230, 219, 0.06);
  --ui-btn-h: rgba(236, 230, 219, 0.12);
  --ui-fg2: #b9b1a5;
  --ui-focus: #ffd38a;
}
/* panel */
body.ui2 nav.hud.tr {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: nowrap;
  width: 300px; max-width: 300px; padding: 14px; box-sizing: border-box;
  background: var(--ui-bg); border: 1px solid var(--line-strong); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-height: calc(100vh - 2 * var(--gut) - 96px); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
/* one scroll bar at a time (user decision, 27 October 2026): while a sheet is open, or the CT volume panel's controls have to
   scroll (ct-scrolls, lib/ctvolume.js), that box is the one that scrolls and this panel holds still meanwhile */
body.ui2:has(.sheet:not([hidden])) nav.hud.tr, body.ui2.ct-scrolls nav.hud.tr { overflow: hidden; }
body.ui2 .ui-body { display: flex; flex-direction: column; gap: 12px; }
body.ui2 .ui-group { display: flex; flex-direction: column; gap: 8px; }
body.ui2 .ui-group + .ui-group { border-top: 1px solid var(--line); padding-top: 12px; }
body.ui2 .ui-group[hidden] { display: none; }
body.ui2 .ui-gh { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ui-fg2); }
body.ui2 nav.hud.tr .ui-fold { display: none; }

/* shared button look: chips, icon buttons, bottom bar, read */
body.ui2 nav.hud.tr .chip, body.ui2 nav.hud.tr .icon, body.ui2 .ui-fold,
body.ui2 #btnRollUp, body.ui2 #btnRead {
  min-height: var(--ui-tap); min-width: var(--ui-tap); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--ui-r);
  background: var(--ui-btn); color: var(--fg); cursor: pointer;
  font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  transition: background .15s, border-color .15s, color .15s;
}
body.ui2 nav.hud.tr .chip + .chip { border-left: 1px solid var(--line-strong); }
body.ui2 nav.hud.tr .chip:not(.on):hover, body.ui2 nav.hud.tr .icon:hover, body.ui2 #btnRollUp:not(.on):hover, body.ui2 #btnRead:hover, body.ui2 .ui-fold:hover {
  background: var(--ui-btn-h); border-color: var(--fg); color: var(--fg);
}
body.ui2 nav.hud.tr [hidden], body.ui2 nav.hud.tr .chip[hidden] { display: none !important; }

/* icons drawn with a mask so app.js can rewrite the button text freely */
body.ui2 :is(nav.hud.tr button[id], #btnRead, #btnRollUp)::before {
  flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ui-i) center / contain no-repeat; mask: var(--ui-i) center / contain no-repeat;
}
body.ui2 nav.hud.tr .chip[data-layer]::before, body.ui2 nav.hud.tr button[id]:not([id^=btn]):not([id^=tool]):not([id^=ui])::before { content: none; }
body.ui2 #btnBench svg, body.ui2 #btnShot svg { display: none; }
body.ui2 .icon .ui-lbl { font-family: var(--mono); }

/* layers: a full width segmented control */
body.ui2 .ui-layers .seg[role=tablist] { display: grid; grid-template-columns: 1fr; gap: 6px; border: 0; background: none; backdrop-filter: none; }
body.ui2 .ui-layers .chip { justify-content: flex-start; text-align: left; width: 100%; padding: 0 12px; }
body.ui2 .ui-layers .chip::after { content: attr(aria-keyshortcuts); margin-left: auto; font-size: 10px; color: var(--ui-fg2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px; }
body.ui2 .ui-layers .chip.on::after { color: inherit; border-color: currentColor; }
body.ui2 .layer-hint, body.ui2 .layer-why { order: 0; flex-basis: auto; max-width: none; margin: 0; text-align: left; font-size: 11px; line-height: 1.45; color: var(--ui-fg2); }
body.ui2 .layer-why summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--fg); }

/* view: two column grid of icon + label buttons */
body.ui2 .ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.ui2 .ui-grid .icon { width: auto; height: auto; justify-content: flex-start; }
body.ui2 #btnHelp { display: inline-flex; }

/* destroy: big toggle, then a grid of tools */
body.ui2 .ui-destroy .tear-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; border: 0; background: none; backdrop-filter: none; order: 0; }
body.ui2 #btnTear { grid-column: 1 / -1; }
body.ui2 .ui-destroy .chip { justify-content: flex-start; }
body.ui2 .ui-destroy .chip[aria-keyshortcuts]::after { content: attr(aria-keyshortcuts); margin-left: auto; font-size: 10px; color: var(--ui-fg2); }

/* active state: filled, with a check bar on the left so it does not rely on color alone */
body.ui2 nav.hud.tr .chip.on, body.ui2 nav.hud.tr [aria-pressed=true], body.ui2 #btnRollUp.on {
  background: var(--ink); border-color: var(--ink); color: #1a1208; box-shadow: inset 4px 0 0 rgba(0,0,0,.35);
}
body.ui2 nav.hud.tr .chip.gpu.on { background: var(--gpu); border-color: var(--gpu); color: #04181b; }
body.ui2 nav.hud.tr .chip.tool.on { background: var(--fg); border-color: var(--fg); color: #14110d; }
body.ui2 nav.hud.tr .chip.on::after, body.ui2 nav.hud.tr [aria-pressed=true]::after { color: inherit; }

/* scrolls */
body.ui2 .ui-scrolls .scroll-pick { margin: 0; }
body.ui2 .ui-scrolls .scroll-pick select { min-height: var(--ui-tap); border-radius: var(--ui-r); max-width: 100%; flex: 1; font-size: 12px; padding: 0 10px; }
body.ui2 .ui-scrolls .scroll-pick .chip, body.ui2 .ui-scrolls .scroll-pick button { min-height: var(--ui-tap); }

/* bottom bar */
body.ui2 footer.hud.bottom { gap: 12px; }
body.ui2 #play { width: 52px; height: 52px; }
body.ui2 .readout .read { margin-top: 8px; }
body.ui2 .scrub { height: 52px; }

/* focus rings everywhere */
body.ui2 :is(button, a, select, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r);
}
body.ui2 .scrub:focus-within .knob { outline: 3px solid var(--ui-focus); }

/* tooltip */
.ui-tip { position: fixed; z-index: 30; max-width: 280px; padding: 8px 10px; border-radius: 8px;
  background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); font-size: 11px; line-height: 1.45;
  letter-spacing: .02em; box-shadow: 0 6px 24px rgba(0,0,0,.6); pointer-events: none; display: flex; gap: 10px; align-items: flex-start; }
.ui-tip[hidden] { display: none; }
.ui-tip kbd { flex: none; color: var(--ink); border-color: var(--ink); }

/* readout and credit never sit under the panel */
body.ui2 .credit { right: calc(var(--gut) + 316px); }

/* small screens: the panel docks above the bottom bar; More controls unfolds View, Destroy and Scrolls. The panel
   also leaves room for the Read box that sits on top of it (--ui-bl-h), so that box never covers the title */
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr {
    top: auto; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 76px); width: auto; max-width: none;
    padding: 10px; gap: 8px; max-height: calc(100vh - var(--ui-top-b, 140px) - var(--gut) - 88px - var(--ui-bl-h, 0px));
  }
  body.ui2 .ui-layers .ui-gh, body.ui2 .ui-layers .layer-hint, body.ui2 .ui-layers .layer-why { display: none; }
  body.ui2 .ui-layers .seg[role=tablist] { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  body.ui2 .ui-layers .chip { justify-content: center; text-align: center; padding: 4px 6px; font-size: 10px; letter-spacing: .04em; }
  body.ui2 .ui-layers .chip::after { display: none; }
  body.ui2 nav.hud.tr .ui-fold { display: inline-flex; width: 100%; }
  body.ui2 .ui-fold::after { content: ""; }
  body.ui2 .ui-fold[aria-expanded=true]::before { transform: rotate(180deg); }
  body.ui2 nav.hud.tr:not(.ui-open) .ui-body { display: none; }
  body.ui2 .ui-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  body.ui2 .ui-destroy .tear-seg { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  body.ui2 #btnTear { grid-column: auto; }
  body.ui2 .bl { bottom: calc(var(--gut) + 76px + var(--ui-panel-h, 110px) + 10px); }
  body.ui2 .credit { right: auto; left: var(--gut); top: calc(var(--ui-head-b, 120px) + 8px); bottom: auto; }
  body.ui2 #btnRollUp { padding: 0 10px; font-size: 10px; }
  body.ui2 #play { width: 48px; height: 48px; }
}
@media (pointer: coarse) { body.ui2 #btnHelp { display: none; } }
@media (prefers-reduced-motion: reduce) { body.ui2 * { transition: none !important; } }
body.ui2.shot nav.hud.tr { display: none !important; }
body.ui2 #btnHelp::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.8-1%201.5v.7M12%2017v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnOpen::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h6l2%202h10v11H3zM12%2011v6M9%2014h6%22/%3E%3C/svg%3E"); }
body.ui2 #btnBench::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019V10M10%2019V5M15%2019v-7M20%2019v-4M3%2021h18%22/%3E%3C/svg%3E"); }
body.ui2 #btnInfo::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnShot::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-3h6l2%203h3v11H4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.5%22/%3E%3C/svg%3E"); }
body.ui2 #uiReset::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012a8%208%200%201%200%202.3-5.6M4%204v4h4%22/%3E%3C/svg%3E"); }
body.ui2 #uiFull::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209V4h5M20%209V4h-5M4%2015v5h5M20%2015v5h-5%22/%3E%3C/svg%3E"); }
body.ui2 #btnTear::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203L5%2014h6l-1%207%208-11h-6z%22/%3E%3C/svg%3E"); }
body.ui2 #toolTear::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013l3-4%203%204%203-4%203%204%203-4%203%204%22/%3E%3C/svg%3E"); }
body.ui2 #btnCrush::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v11M7%209l5%205%205-5M4%2020h16%22/%3E%3C/svg%3E"); }
body.ui2 #toolBurn::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%206%206%2011a6%206%200%200%201-12%200c0-3%202-4%203-7%201%202%202%203%203%203z%22/%3E%3C/svg%3E"); }
body.ui2 #toolWater::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c4%205%206%208%206%2011a6%206%200%200%201-12%200c0-3%202-6%206-11z%22/%3E%3C/svg%3E"); }
body.ui2 #btnReset::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5M4%209h10a6%206%200%200%201%200%2012h-3%22/%3E%3C/svg%3E"); }
body.ui2 #btnCrumble::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16M7%2017v.5M11%2016v.5M15%2017v.5M9%2012v.5M13%2011v.5M17%2013v.5M11%207v.5%22/%3E%3C/svg%3E"); }
body.ui2 #btnSandbox::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h18v6H3z%22/%3E%3C/svg%3E"); }
body.ui2 #btnShake::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012h3l2-5%203%2010%203-10%203%2010%202-5h4%22/%3E%3C/svg%3E"); }
body.ui2 #btnSound::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h4l5-4v14l-5-4H4zM17%209a4%204%200%200%201%200%206%22/%3E%3C/svg%3E"); }
body.ui2 #btnRead::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h6a3%203%200%200%201%203%203v11a2%202%200%200%200-2-2H3zM21%205h-6a3%203%200%200%200-3%203v11a2%202%200%200%201%202-2h7z%22/%3E%3C/svg%3E"); }
body.ui2 #btnRollUp::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5M6%2011l6-6%206%206%22/%3E%3C/svg%3E"); }
body.ui2 #uiFold::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E"); }

/* settings */
body.ui2 .ui-settings { width: min(420px, calc(100vw - 2 * var(--gut))); inset: var(--gut) auto auto var(--gut); max-height: calc(100vh - 2 * var(--gut)); z-index: 12; }
body.ui2 .ui-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
body.ui2 .ui-row { display: flex; flex-direction: column; gap: 6px; color: var(--fg); }
body.ui2 .ui-row select { min-height: 44px; background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--ui-r); padding: 0 10px; font: inherit; }
body.ui2 .ui-row input[type=range] { min-height: 44px; accent-color: var(--ink); }
body.ui2 .ui-check { flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; }
body.ui2 .ui-check input { width: 24px; height: 24px; accent-color: var(--ink); }
body.ui2 .ui-settings .chip { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--ui-r); padding: 0 14px; color: var(--fg); }
body.ui2.ui-nohud .hud.tl, body.ui2.ui-nohud #readout, body.ui2.ui-nohud .credit, body.ui2.ui-nohud .layer-hint, body.ui2.ui-nohud .layer-why { display: none !important; }
body.ui2.ui-nolabels .ui-grid .ui-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.ui2.ui-nolabels .ui-grid { grid-template-columns: repeat(4, 1fr); }
body.ui2.ui-nolabels .ui-grid .icon { justify-content: center; }
body.ui2.ui-reduced .grain, body.ui2.ui-reduced .play { animation: none !important; }
body.ui2.ui-reduced * { transition: none !important; }
body[data-bg=black] { background: #000; } body[data-bg=slate] { background: #10161d; } body[data-bg=warm] { background: #16100a; }
body.ui2 #btnSettings::before { content: ""; --ui-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M4.9%204.9l2.1%202.1M17%2017l2.1%202.1M4.9%2019.1L7%2017M17%207l2.1-2.1%22/%3E%3C/svg%3E"); }
.ui-skip { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--gut) + 76px); transform: translateX(-50%);
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(14,12,10,.86); color: var(--fg);
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ui-skip:hover { border-color: var(--ink); color: var(--ink); }
.ui-skip:focus-visible { outline: 3px solid #ffd38a; outline-offset: 2px; }
/* glossary */
a.ui-term { border-bottom: 1px dotted currentColor; text-decoration: none; cursor: help; }
a.ui-term:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ui-gloss summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ui-gloss input[type=search] { min-height: 44px; background: #15120f; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; font: inherit; }
.ui-gl dt { color: var(--fg); font-weight: 500; margin-top: 12px; scroll-margin: 40px; }
.ui-gl dd { margin: 4px 0 0; }
.ui-gl dt.ui-flash { color: var(--ink); }
.ui-gl [hidden] { display: none; }
/* audit: header never runs under the panel, readout legible, scrubber does not shift */
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 .hud.tl { max-width: min(560px, calc(100vw - 2 * var(--gut) - 316px)); }
  body.ui2 .hud.tl h1 { font-size: clamp(30px, 4.6vw, 64px); }
  body.ui2 .kicker { white-space: normal; }
}
@media (max-height: 760px) and (min-width: 721px) { body.ui2 .hud.tl .lede { display: none; } }
body.ui2 #readout { background: rgba(10, 9, 8, .78); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.ui2 #btnRollUp { width: 112px; min-width: 112px; flex: none; }
@media (max-width: 720px) { body.ui2 #btnRollUp { width: 92px; min-width: 92px; } body.ui2 #readout { padding: 6px; } }
/* Ink Bench, promoted */
body.ui2 nav.hud.tr .ui-bench { width: 100%; height: auto; justify-content: flex-start; border-color: rgba(94, 240, 255, .55); color: var(--gpu); background: rgba(94, 240, 255, .07); }
body.ui2 nav.hud.tr .ui-bench:hover { background: rgba(94, 240, 255, .16); border-color: var(--gpu); color: var(--gpu); }
body.ui2.ui-nobench #btnBench { display: none; }
.ui-hint { position: fixed; z-index: 15; max-width: 240px; padding: 10px 12px; border-radius: 10px; background: #0d2226; color: #dffbff; border: 1px solid var(--gpu); font-size: 11px; line-height: 1.45; pointer-events: none; }
.hud.tl .lede .ui-bench-link { pointer-events: auto; color: var(--gpu); border-bottom-color: rgba(94,240,255,.5); }
body.ui2 .ui-layers .chip { text-transform: none; letter-spacing: .04em; }
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 nav.hud.tr { width: 340px; max-width: 340px; }
  body.ui2 .hud.tl { max-width: min(560px, calc(100vw - 2 * var(--gut) - 356px)); }
  body.ui2 .credit { right: calc(var(--gut) + 356px); }
  body.ui2 .ui-grid { grid-template-columns: repeat(3, 1fr); }
  body.ui2 .ui-grid .icon { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 10px; letter-spacing: .04em; }
  body.ui2 .ui-destroy .tear-seg { grid-template-columns: repeat(3, 1fr); }
  body.ui2 .ui-destroy .chip { padding: 0 8px; font-size: 10px; gap: 6px; }
  body.ui2 .ui-destroy .chip::after { display: none; }
  body.ui2 .layer-why { display: none; }
}
body.ui2 nav.hud.tr .ui-layers .chip { text-transform: none; }

/* ---------------------------------------------------------------- type and spacing scale
   One scale for every panel. Small screens raise the floor to 14 px. */
:root {
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 26px;
  --lh-tight: 1.2; --lh-body: 1.5; --lh-loose: 1.6;
  --track-label: .04em; --track-kicker: .06em;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --measure: 62ch;
  --btn-gap: 8px; --btn-pad-x: 14px; --btn-fs: var(--fs-sm);
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
@media (max-width: 720px), (max-height: 480px) {
  :root { --fs-xs: 14px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px; --fs-xl: 24px; --btn-pad-x: 12px; --btn-fs: 14px; }
}

/* buttons: balanced padding, one icon gap, centered labels, no wide tracking */
body.ui2 nav.hud.tr .chip, body.ui2 nav.hud.tr .icon, body.ui2 nav.hud.tr .ui-fold,
body.ui2 #btnRollUp, body.ui2 #btnRead, body.ui2 .sheet .chip, body.ui2 .ui-skip {
  font-size: var(--btn-fs); letter-spacing: var(--track-label); line-height: var(--lh-tight);
  gap: var(--btn-gap); padding: var(--sp-2) var(--btn-pad-x); align-items: center; text-wrap: balance;
}
body.ui2 :is(nav.hud.tr button, #btnRead, #btnRollUp) .ui-lbl { line-height: var(--lh-tight); }
body.ui2 .ui-gh { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); margin: 0 0 var(--sp-1); }
body.ui2 .ui-layers .chip { letter-spacing: .02em; }
body.ui2 .ui-layers .chip::after, body.ui2 .ui-destroy .chip::after { font-size: var(--fs-xs); letter-spacing: 0; }
@media (min-width: 721px) and (min-height: 481px) {
  body.ui2 .ui-grid .icon, body.ui2 .ui-destroy .chip { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-1); letter-spacing: .02em; }
}

/* general text */
body.ui2 .mono { letter-spacing: .02em; }
body.ui2 .kicker { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); line-height: var(--lh-body); margin-bottom: var(--sp-3); }
body.ui2 .hud.tl .lede { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 46ch; margin-top: var(--sp-4); letter-spacing: 0; }
body.ui2 #readout { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: .02em; gap: var(--sp-1); }
body.ui2 .layer-hint, body.ui2 .layer-why { font-size: var(--fs-sm); line-height: var(--lh-body); }
body.ui2 .credit { font-size: var(--fs-xs); letter-spacing: .02em; line-height: var(--lh-body); }
body.ui2 .ends { font-size: var(--fs-xs); letter-spacing: .02em; }
body.ui2 .ui-tip { font-size: var(--fs-sm); line-height: var(--lh-body); padding: var(--sp-2) var(--sp-3); }
body.ui2 .ui-hint { font-size: var(--fs-sm); line-height: var(--lh-body); }
body.ui2 .sheet-head { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }
body.ui2 .sheet-head h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: var(--sp-1) 0 0; }
body.ui2 .sheet-head .mono { font-size: var(--fs-xs); letter-spacing: var(--track-kicker); }
body.ui2 .about-body { font-size: var(--fs-base); line-height: var(--lh-loose); padding: var(--sp-2) var(--sp-5) var(--sp-5); }
body.ui2 .about-body > * { max-width: var(--measure); }
body.ui2 .about-body p { margin: 0 0 var(--sp-3); }
body.ui2 .about-body h3, body.ui2 .about-body .ui-gh { margin: var(--sp-5) 0 var(--sp-2); }
body.ui2 .about-body .small, body.ui2 .about-body code { font-size: var(--fs-sm); }
body.ui2 .ui-gl dt { margin-top: var(--sp-4); line-height: var(--lh-tight); }
body.ui2 .ui-gl dd { margin: var(--sp-1) 0 0; line-height: var(--lh-body); }
body.ui2 .ui-form { gap: var(--sp-3); }
body.ui2 .ui-row { font-size: var(--fs-base); line-height: var(--lh-body); gap: var(--sp-1); }
body.ui2 .keys { font-size: var(--fs-sm); line-height: var(--lh-body); row-gap: var(--sp-2); }
body.ui2 .sheet-foot { font-size: var(--fs-sm); line-height: var(--lh-body); padding: var(--sp-3) var(--sp-5); }
body.ui2 .bench p, body.ui2 .bench li, body.ui2 .bench dd, body.ui2 .b-private { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: 0; }
body.ui2 .bench .mono { letter-spacing: .02em; }

/* safe areas (notches, home bar) */
body.ui2 .hud.tl { top: calc(var(--gut) + var(--safe-t)); left: calc(var(--gut) + var(--safe-l)); }
body.ui2 footer.hud.bottom { bottom: calc(var(--gut) + var(--safe-b)); left: calc(var(--gut) + var(--safe-l)); right: calc(var(--gut) + var(--safe-r)); }
body.ui2 #readout { left: calc(var(--gut) + var(--safe-l)); }
@media (min-width: 721px) and (min-height: 481px) { body.ui2 nav.hud.tr { top: calc(var(--gut) + var(--safe-t)); right: calc(var(--gut) + var(--safe-r)); } }

/* small portrait: headline and panel sizing */
@media (max-width: 720px) and (min-height: 481px) {
  body.ui2 .hud.tl h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.05; }
  body.ui2 nav.hud.tr { bottom: calc(var(--gut) + 76px + var(--safe-b)); left: calc(var(--gut) + var(--safe-l)); right: calc(var(--gut) + var(--safe-r)); }
  body.ui2 .ui-layers .chip { font-size: 13px; padding: var(--sp-1) var(--sp-2); }
  body.ui2 .about, body.ui2 .ui-settings, body.ui2 .help { inset: calc(var(--gut) + var(--safe-t)) calc(var(--gut) + var(--safe-r)) calc(var(--gut) + var(--safe-b)) calc(var(--gut) + var(--safe-l)); width: auto; max-height: none; }
}
/* phone landscape: header left, panel as a right column, readout and bar below */
@media (max-height: 480px) and (orientation: landscape) {
  body.ui2 .hud.tl { max-width: calc(100vw - 2 * var(--gut) - 320px - var(--safe-l) - var(--safe-r)); }
  body.ui2 .hud.tl h1 { font-size: 24px; line-height: 1.05; }
  body.ui2 .hud.tl .lede { display: none; }
  body.ui2 nav.hud.tr { top: calc(var(--sp-2) + var(--safe-t)); bottom: calc(var(--gut) + 70px + var(--safe-b)); left: auto; right: calc(var(--gut) + var(--safe-r)); width: 300px; max-width: 300px; max-height: none; }
  body.ui2 .bl { bottom: calc(var(--gut) + 70px + var(--safe-b)); }
  body.ui2 #readout > div { display: none; }
  body.ui2 .credit { top: auto; bottom: calc(var(--gut) + 70px + var(--safe-b)); left: auto; right: calc(var(--gut) + 316px + var(--safe-r)); }
  body.ui2 .about, body.ui2 .ui-settings, body.ui2 .help { inset: var(--sp-2) calc(var(--gut) + var(--safe-r)) var(--sp-2) calc(var(--gut) + var(--safe-l)); width: auto; max-height: none; }
  body.ui2 .sheet-head { padding: var(--sp-2) var(--sp-4); }
}
/* fold only on small screens (declared last so it wins over the shared button rule) */
body.ui2 nav.hud.tr .chip.ui-fold { display: none; }
@media (max-width: 720px), (max-height: 480px) { body.ui2 nav.hud.tr .chip.ui-fold { display: inline-flex; width: 100%; } }
/* layer chips on phones: tight but at least 14 px, wrap between words only */
@media (max-width: 720px) {
  body.ui2 nav.hud.tr .ui-layers .chip { padding: var(--sp-1) var(--sp-2); letter-spacing: 0; line-height: 1.15; white-space: normal; overflow-wrap: normal; word-break: keep-all; box-shadow: none; }
  body.ui2 nav.hud.tr .ui-layers .chip .mu { margin: 0; padding: 0; letter-spacing: 0; }
}
/* very narrow phones: Roll up shows its icon only, so the scrubber labels fit */
@media (max-width: 400px) {
  body.ui2 #btnRollUp { width: 48px; min-width: 48px; padding: 0; font-size: 0; letter-spacing: 0; gap: 0; }
  body.ui2 .ends { font-size: var(--fs-xs); }
}
/* layer chips: the µ span must flow inline with the label, not as its own flex item */
body.ui2 nav.hud.tr .ui-layers .chip { gap: 0; }
body.ui2 nav.hud.tr .ui-layers .chip::after { margin-left: auto; }
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr .ui-layers .chip { display: block; text-align: center; padding: var(--sp-1) var(--sp-1); }
  body.ui2 nav.hud.tr .ui-layers .chip .dot { margin-right: 4px; }
}
body.ui2 .scroll-pick label { font-size: var(--fs-xs); }
body.ui2 nav.hud.tr { justify-content: flex-start; }
@media (max-height: 480px) and (orientation: landscape) {
  body.ui2 .credit { top: calc(var(--ui-head-b, 100px) + 4px); bottom: auto; left: calc(var(--gut) + var(--safe-l)); right: auto; }
}
body.ui2 #btnRollUp { white-space: nowrap; }
body.ui2 nav.hud.tr .ui-layers .chip { display: block; text-align: left; line-height: 44px; padding-top: 0; padding-bottom: 0; }
body.ui2 nav.hud.tr .ui-layers .chip::after { float: right; line-height: 1.2; margin-top: 13px; }
@media (max-width: 720px), (max-height: 480px) {
  body.ui2 nav.hud.tr .ui-layers .chip { text-align: center; line-height: 1.2; padding: var(--sp-1); display: block; align-content: center; }
}