jaml-ui 0.24.19 → 0.25.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 (235) hide show
  1. package/DESIGN.md +2 -2
  2. package/README.md +0 -13
  3. package/assets/WeeJokerExampleDAilyGame.png +0 -0
  4. package/assets/balatro-stake-chips.png +0 -0
  5. package/dist/assets.d.ts +1 -2
  6. package/dist/chunks/Layer-BBPJFHfs.js +17 -0
  7. package/dist/chunks/Layer-BBPJFHfs.js.map +1 -0
  8. package/dist/chunks/assets-RWUiFSTc.js +37 -0
  9. package/dist/chunks/assets-RWUiFSTc.js.map +1 -0
  10. package/dist/chunks/motelyItemDecoder-CueyZ0XD.js +6039 -0
  11. package/dist/chunks/motelyItemDecoder-CueyZ0XD.js.map +1 -0
  12. package/dist/chunks/spriteMapper-CFjN0_TV.js +2415 -0
  13. package/dist/chunks/spriteMapper-CFjN0_TV.js.map +1 -0
  14. package/dist/chunks/tokens-B65Fzble.js +57 -0
  15. package/dist/chunks/tokens-B65Fzble.js.map +1 -0
  16. package/dist/chunks/ui-5cBy3zAm.js +1387 -0
  17. package/dist/chunks/ui-5cBy3zAm.js.map +1 -0
  18. package/dist/components/AnalyzerExplorer.d.ts +1 -1
  19. package/dist/components/CardFan.d.ts +1 -1
  20. package/dist/components/CardList.d.ts +1 -1
  21. package/dist/components/DeckSprite.d.ts +1 -1
  22. package/dist/components/JamlAestheticSelector.d.ts +1 -1
  23. package/dist/components/JamlAnalyzerFullscreen.d.ts +5 -5
  24. package/dist/components/JamlCurator.d.ts +1 -1
  25. package/dist/components/JamlIde.d.ts +5 -5
  26. package/dist/components/JamlSeedInput.d.ts +1 -1
  27. package/dist/components/JamlSpeedometer.d.ts +1 -1
  28. package/dist/components/MotelyVersionBadge.d.ts +1 -1
  29. package/dist/components/Standardcard.d.ts +1 -1
  30. package/dist/components/jamlMap/CategoryPicker.d.ts +3 -3
  31. package/dist/components/jamlMap/JamlMapEditor.d.ts +1 -1
  32. package/dist/components/jamlMap/JokerPicker.d.ts +1 -1
  33. package/dist/components/jamlMap/MysterySlot.d.ts +2 -2
  34. package/dist/components/jamlMap/index.d.ts +4 -4
  35. package/dist/core.d.ts +5 -5
  36. package/dist/core.js +27 -5
  37. package/dist/core.js.map +1 -0
  38. package/dist/decode/motelyItemDecoder.d.ts +0 -10
  39. package/dist/decode/motelySprite.d.ts +1 -1
  40. package/dist/fonts/m6x11plus.otf +0 -0
  41. package/dist/hooks/analyzerStreamRegistry.d.ts +2 -2
  42. package/dist/hooks/useAnalyzer.d.ts +2 -2
  43. package/dist/hooks/useSearch.d.ts +2 -2
  44. package/dist/index.d.ts +29 -31
  45. package/dist/index.js +16725 -34
  46. package/dist/index.js.map +1 -0
  47. package/dist/lib/const.d.ts +2 -2
  48. package/dist/lib/hooks/useDragScroll.d.ts +1 -1
  49. package/dist/lib/hooks/useJamlFilter.d.ts +2 -2
  50. package/dist/lib/hooks/useSeedAnalyzer.d.ts +2 -2
  51. package/dist/lib/utils.d.ts +1 -1
  52. package/dist/motely.d.ts +4 -3
  53. package/dist/motely.js +65 -3
  54. package/dist/motely.js.map +1 -0
  55. package/dist/motelyBoot.d.ts +2 -0
  56. package/dist/motelyDisplay.d.ts +0 -2
  57. package/dist/r3f/Card3D.d.ts +2 -2
  58. package/dist/r3f/JimboBillboard.d.ts +1 -1
  59. package/dist/r3f.js +235 -3
  60. package/dist/r3f.js.map +1 -0
  61. package/dist/render/CanvasRenderer.d.ts +1 -1
  62. package/dist/sprites/spriteData.d.ts +1 -6
  63. package/dist/sprites/spriteMapper.d.ts +1 -1
  64. package/dist/ui/JimboBadge.d.ts +1 -1
  65. package/dist/ui/JimboFloating.d.ts +1 -1
  66. package/dist/ui/JimboIconButton.d.ts +1 -1
  67. package/dist/ui/JimboSelect.d.ts +1 -1
  68. package/dist/ui/footer.d.ts +2 -3
  69. package/dist/ui/hooks.d.ts +1 -1
  70. package/dist/ui/ide/DeckSprite.d.ts +1 -1
  71. package/dist/ui/jimbo.css +2 -1837
  72. package/dist/ui/jimboApp.d.ts +1 -1
  73. package/dist/ui/jimboBackground.d.ts +4 -4
  74. package/dist/ui/jimboFilterBar.d.ts +1 -1
  75. package/dist/ui/jimboFlankNav.d.ts +1 -1
  76. package/dist/ui/jimboInfoCard.d.ts +1 -1
  77. package/dist/ui/jimboInset.d.ts +1 -1
  78. package/dist/ui/jimboStatGrid.d.ts +1 -1
  79. package/dist/ui/jimboText.d.ts +1 -1
  80. package/dist/ui/jimboTooltip.d.ts +2 -2
  81. package/dist/ui/mascot/SeedMascot.d.ts +2 -2
  82. package/dist/ui/panel.d.ts +1 -1
  83. package/dist/ui/radial/RadialBadge.d.ts +1 -2
  84. package/dist/ui/radial/RadialButton.d.ts +1 -2
  85. package/dist/ui/radial/RadialMenu.d.ts +2 -2
  86. package/dist/ui/radial/RadialPill.d.ts +1 -2
  87. package/dist/ui/radial/index.d.ts +16 -16
  88. package/dist/ui/radial/radialMenuStore.d.ts +1 -1
  89. package/dist/ui/showcase.d.ts +1 -1
  90. package/dist/ui/sprites.d.ts +2 -2
  91. package/dist/ui.d.ts +0 -1
  92. package/dist/ui.js +3 -36
  93. package/dist/utils/gameCardUtils.d.ts +1 -1
  94. package/dist/utils/jamlVisualFilter.d.ts +1 -7
  95. package/package.json +18 -30
  96. package/dist/assets.js +0 -48
  97. package/dist/components/AnalyzerExplorer.js +0 -391
  98. package/dist/components/CardFan.js +0 -80
  99. package/dist/components/CardList.js +0 -5
  100. package/dist/components/DeckSprite.js +0 -75
  101. package/dist/components/GameCard.js +0 -355
  102. package/dist/components/JamlAestheticSelector.js +0 -22
  103. package/dist/components/JamlAnalyzerFullscreen.js +0 -263
  104. package/dist/components/JamlCodeEditor.js +0 -137
  105. package/dist/components/JamlCurator.js +0 -64
  106. package/dist/components/JamlCurator.stories.d.ts +0 -6
  107. package/dist/components/JamlCurator.stories.js +0 -14
  108. package/dist/components/JamlIde.js +0 -193
  109. package/dist/components/JamlIdeToolbar.js +0 -23
  110. package/dist/components/JamlIdeVisual.js +0 -218
  111. package/dist/components/JamlMapPreview.js +0 -121
  112. package/dist/components/JamlSeedInput.js +0 -26
  113. package/dist/components/JamlSpeedometer.js +0 -70
  114. package/dist/components/Jimbolate.js +0 -17
  115. package/dist/components/MotelyVersionBadge.js +0 -19
  116. package/dist/components/PaginatedFilterBrowser.js +0 -54
  117. package/dist/components/RunConfigModal.js +0 -59
  118. package/dist/components/Standardcard.js +0 -80
  119. package/dist/components/jamlMap/CategoryPicker.js +0 -135
  120. package/dist/components/jamlMap/JamlMapEditor.js +0 -304
  121. package/dist/components/jamlMap/JamlMapEditor.stories.d.ts +0 -7
  122. package/dist/components/jamlMap/JamlMapEditor.stories.js +0 -26
  123. package/dist/components/jamlMap/JamlMapEditorDemo.d.ts +0 -8
  124. package/dist/components/jamlMap/JamlMapEditorDemo.js +0 -323
  125. package/dist/components/jamlMap/JokerPicker.js +0 -113
  126. package/dist/components/jamlMap/MysterySlot.js +0 -128
  127. package/dist/components/jamlMap/MysterySlot.stories.d.ts +0 -7
  128. package/dist/components/jamlMap/MysterySlot.stories.js +0 -31
  129. package/dist/components/jamlMap/index.js +0 -4
  130. package/dist/decode/motelyItemDecoder.js +0 -164
  131. package/dist/decode/motelySprite.js +0 -84
  132. package/dist/hooks/analyzerStreamRegistry.js +0 -96
  133. package/dist/hooks/searchWorker.d.ts +0 -1
  134. package/dist/hooks/searchWorker.js +0 -119
  135. package/dist/hooks/searchWorkerCode.d.ts +0 -1
  136. package/dist/hooks/searchWorkerCode.js +0 -85
  137. package/dist/hooks/useAnalyzer.js +0 -91
  138. package/dist/hooks/useIntersectionObserver.js +0 -52
  139. package/dist/hooks/useSearch.js +0 -161
  140. package/dist/hooks/useShopStream.js +0 -85
  141. package/dist/lib/SpriteMapper.js +0 -48
  142. package/dist/lib/cardParser.js +0 -67
  143. package/dist/lib/classes/BuyMetaData.js +0 -1
  144. package/dist/lib/config.js +0 -15
  145. package/dist/lib/const.js +0 -521
  146. package/dist/lib/data/constants.js +0 -14
  147. package/dist/lib/hooks/useDragScroll.js +0 -48
  148. package/dist/lib/hooks/useJamlFilter.js +0 -219
  149. package/dist/lib/hooks/useSeedAnalyzer.js +0 -50
  150. package/dist/lib/jaml/jamlCompletion.js +0 -13
  151. package/dist/lib/jaml/jamlData.js +0 -6
  152. package/dist/lib/jaml/jamlObjectives.js +0 -97
  153. package/dist/lib/jaml/jamlParser.js +0 -47
  154. package/dist/lib/jaml/jamlPresets.js +0 -61
  155. package/dist/lib/jaml/jamlSchema.js +0 -91
  156. package/dist/lib/parseDailyRitual.js +0 -70
  157. package/dist/lib/tts/getRevealPos.js +0 -16
  158. package/dist/lib/tts/splitTtsDisplay.js +0 -35
  159. package/dist/lib/types.js +0 -1
  160. package/dist/lib/utils.js +0 -5
  161. package/dist/motelyDisplay.js +0 -59
  162. package/dist/r3f/Card3D.js +0 -72
  163. package/dist/r3f/JimboBillboard.js +0 -32
  164. package/dist/r3f/JimboText3D.js +0 -8
  165. package/dist/render/CanvasRenderer.js +0 -11
  166. package/dist/render/Layer.js +0 -18
  167. package/dist/sprites/spriteData.js +0 -100
  168. package/dist/sprites/spriteMapper.js +0 -75
  169. package/dist/stories/Button.d.ts +0 -15
  170. package/dist/stories/Button.js +0 -7
  171. package/dist/stories/Button.stories.d.ts +0 -24
  172. package/dist/stories/Button.stories.js +0 -50
  173. package/dist/stories/Header.d.ts +0 -12
  174. package/dist/stories/Header.js +0 -4
  175. package/dist/stories/Header.stories.d.ts +0 -18
  176. package/dist/stories/Header.stories.js +0 -26
  177. package/dist/stories/Page.d.ts +0 -3
  178. package/dist/stories/Page.js +0 -8
  179. package/dist/stories/Page.stories.d.ts +0 -12
  180. package/dist/stories/Page.stories.js +0 -24
  181. package/dist/ui/Jimbo.stories.d.ts +0 -7
  182. package/dist/ui/Jimbo.stories.js +0 -28
  183. package/dist/ui/JimboBadge.js +0 -8
  184. package/dist/ui/JimboFloating.js +0 -17
  185. package/dist/ui/JimboIconButton.js +0 -28
  186. package/dist/ui/JimboInputModal.js +0 -66
  187. package/dist/ui/JimboSelect.js +0 -43
  188. package/dist/ui/JimboToggleList.js +0 -5
  189. package/dist/ui/PanelSplitter.js +0 -78
  190. package/dist/ui/codeBlock.js +0 -14
  191. package/dist/ui/footer.js +0 -20
  192. package/dist/ui/hooks.js +0 -634
  193. package/dist/ui/ide/AgnosticSeedCard.d.ts +0 -19
  194. package/dist/ui/ide/AgnosticSeedCard.js +0 -48
  195. package/dist/ui/ide/DeckSprite.js +0 -2
  196. package/dist/ui/ide/JamlBuilder.d.ts +0 -1
  197. package/dist/ui/ide/JamlBuilder.js +0 -112
  198. package/dist/ui/ide/JamlEditor.js +0 -486
  199. package/dist/ui/ide/JamlEditorMonaco.d.ts +0 -8
  200. package/dist/ui/ide/JamlEditorMonaco.js +0 -78
  201. package/dist/ui/ide/WasmStatus.d.ts +0 -1
  202. package/dist/ui/ide/WasmStatus.js +0 -42
  203. package/dist/ui/jimboApp.js +0 -15
  204. package/dist/ui/jimboBackground.js +0 -26
  205. package/dist/ui/jimboCopyRow.js +0 -18
  206. package/dist/ui/jimboFilterBar.js +0 -16
  207. package/dist/ui/jimboFlankNav.js +0 -18
  208. package/dist/ui/jimboInfoCard.js +0 -26
  209. package/dist/ui/jimboInset.js +0 -9
  210. package/dist/ui/jimboSectionHeader.js +0 -9
  211. package/dist/ui/jimboStatGrid.js +0 -9
  212. package/dist/ui/jimboTabs.js +0 -22
  213. package/dist/ui/jimboText.js +0 -33
  214. package/dist/ui/jimboTooltip.js +0 -39
  215. package/dist/ui/jimboWordmark.js +0 -9
  216. package/dist/ui/mascot/JammySpeechBox.js +0 -30
  217. package/dist/ui/mascot/SeedMascot.js +0 -17
  218. package/dist/ui/mascot/index.js +0 -3
  219. package/dist/ui/mascot/menuConfig.js +0 -12
  220. package/dist/ui/panel.js +0 -24
  221. package/dist/ui/radial/RadialBadge.js +0 -43
  222. package/dist/ui/radial/RadialBreadcrumb.js +0 -18
  223. package/dist/ui/radial/RadialButton.js +0 -102
  224. package/dist/ui/radial/RadialMenu.js +0 -168
  225. package/dist/ui/radial/RadialPill.js +0 -15
  226. package/dist/ui/radial/index.js +0 -18
  227. package/dist/ui/radial/radialMenuStore.js +0 -122
  228. package/dist/ui/radial/radialMenuViewport.js +0 -59
  229. package/dist/ui/radial/useRadialMenu.js +0 -107
  230. package/dist/ui/showcase.js +0 -20
  231. package/dist/ui/sprites.js +0 -77
  232. package/dist/ui/tokens.js +0 -64
  233. package/dist/utils/gameCardUtils.js +0 -15
  234. package/dist/utils/jamlMapPreview.js +0 -106
  235. package/dist/utils/jamlVisualFilter.js +0 -210
package/dist/ui/jimbo.css CHANGED
@@ -1,1837 +1,2 @@
1
- /* ═══════════════════════════════════════════════════════════════════════════
2
- jimbo.css — Jimbo Design System
3
- Balatro-inspired design tokens + component classes.
4
- Eyedropped from actual game shader output — not Lua hex values.
5
- ═══════════════════════════════════════════════════════════════════════════ */
6
-
7
- @font-face {
8
- font-family: 'm6x11plus';
9
- src: url('/fonts/m6x11plus.otf') format('opentype');
10
- font-weight: normal;
11
- font-style: normal;
12
- font-display: swap;
13
- }
14
-
15
- /* Global Scrollbar Hide */
16
- * {
17
- scrollbar-width: none !important;
18
- -ms-overflow-style: none !important;
19
- }
20
-
21
- *::-webkit-scrollbar {
22
- display: none !important;
23
- }
24
-
25
- /* ── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
26
-
27
- :root {
28
- /* Colors — eyedropped from Balatro's rendered shader output */
29
- --j-red: #fe5148;
30
- --j-blue: #0093ff;
31
- --j-green: #429f79;
32
- --j-orange: #ff9800;
33
- --j-gold: #e4b643;
34
- --j-purple: #9e74ce;
35
-
36
- --j-dark-red: #a02721;
37
- --j-dark-blue: #0057a1;
38
- --j-dark-orange: #a05b00;
39
- --j-dark-green: #215f46;
40
- --j-dark-purple: #5e437e;
41
-
42
- --j-dark-grey: #3a5055;
43
- --j-darkest: #1e2b2d;
44
- --j-grey: #708386;
45
- --j-teal-grey: #404c4e;
46
-
47
- --j-panel-edge: #1e2e32;
48
- --j-inner-border: #334461;
49
- --j-border-silver: #b9c2d2;
50
- --j-border-south: #777e89;
51
-
52
- --j-gold-text: #e4b643;
53
- --j-green-text: #35bd86;
54
- --j-orange-text: #ff8f00;
55
- --j-white: #ffffff;
56
- --j-black: #000000;
57
-
58
- --j-tarot-btn: #9e74ce;
59
- --j-planet-btn: #00a7ca;
60
- --j-spectral-btn: #2e76fd;
61
- --j-tarot-btn-dark: #5e437e;
62
- --j-planet-btn-dark: #00657c;
63
- --j-spectral-btn-dark: #14449e;
64
-
65
- /* Typography */
66
- --j-font: 'm6x11plus', 'Courier New', monospace;
67
- /* Coding font — used by JamlCodeEditor and .j-code-block. JetBrains Mono
68
- with a long OS-native fallback chain so the UI still reads as code even
69
- when the Google Fonts stylesheet fails to load. */
70
- --j-font-code: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'SF Mono', SFMono-Regular, Menlo, Consolas, ui-monospace, 'Courier New', monospace;
71
- --j-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
72
-
73
- /* Spacing */
74
- --j-space-xs: 2px;
75
- --j-space-sm: 4px;
76
- --j-space-md: 8px;
77
- --j-space-lg: 12px;
78
- --j-space-xl: 16px;
79
-
80
- /* Radii — Balatro is chunky, not bubbly. Never > 10px. */
81
- --j-radius-sm: 4px;
82
- --j-radius-md: 6px;
83
- --j-radius-lg: 8px;
84
- --j-radius-pill: 10px;
85
-
86
- /* Animation */
87
- --j-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
88
- --j-press-y: 3px;
89
- --j-press-speed: 55ms;
90
- }
91
-
92
-
93
- /* ── Base Text ─────────────────────────────────────────────────────────── */
94
-
95
- .j-text {
96
- font-family: var(--j-font);
97
- font-weight: 400;
98
- line-height: 1.2;
99
- text-shadow: var(--j-text-shadow);
100
- color: var(--j-white);
101
- }
102
-
103
- .j-text--no-shadow {
104
- text-shadow: none;
105
- }
106
-
107
- .j-text--upper {
108
- text-transform: uppercase;
109
- letter-spacing: 0.08em;
110
- }
111
-
112
- /* Font Dance Animation */
113
- .j-text--dance-container {
114
- display: inline-block;
115
- white-space: pre-wrap;
116
- }
117
-
118
- .j-font-dance-char {
119
- display: inline-block;
120
- animation: j-font-dance 1.5s infinite steps(2, end);
121
- }
122
-
123
- @keyframes j-font-dance {
124
-
125
- 0%,
126
- 100% {
127
- transform: translate(0, 0);
128
- }
129
-
130
- 25% {
131
- transform: translate(1px, -1px);
132
- }
133
-
134
- 50% {
135
- transform: translate(0, -2px);
136
- }
137
-
138
- 75% {
139
- transform: translate(-1px, -1px);
140
- }
141
- }
142
-
143
- /* Sizes (from DESIGN.md typography scale) */
144
- .j-text--display {
145
- font-size: 26px;
146
- letter-spacing: 0.04em;
147
- line-height: 1;
148
- }
149
-
150
- .j-text--xl {
151
- font-size: 24px;
152
- letter-spacing: 0.04em;
153
- }
154
-
155
- .j-text--lg {
156
- font-size: 18px;
157
- letter-spacing: 0.04em;
158
- }
159
-
160
- .j-text--heading {
161
- font-size: 14px;
162
- letter-spacing: 0.08em;
163
- line-height: 1.2;
164
- }
165
-
166
- .j-text--md {
167
- font-size: 14px;
168
- }
169
-
170
- .j-text--sm {
171
- font-size: 12px;
172
- }
173
-
174
- .j-text--body {
175
- font-size: 11px;
176
- letter-spacing: 0.05em;
177
- line-height: 1.3;
178
- }
179
-
180
- .j-text--xs {
181
- font-size: 10px;
182
- }
183
-
184
- .j-text--label {
185
- font-size: 9px;
186
- letter-spacing: 0.1em;
187
- line-height: 1;
188
- text-transform: uppercase;
189
- }
190
-
191
- .j-text--micro {
192
- font-size: 8px;
193
- letter-spacing: 0.08em;
194
- line-height: 1;
195
- }
196
-
197
- /* Tones */
198
- .j-text--default {
199
- color: var(--j-white);
200
- }
201
-
202
- .j-text--mult,
203
- .j-text--red {
204
- color: var(--j-red);
205
- }
206
-
207
- .j-text--chips,
208
- .j-text--blue {
209
- color: var(--j-blue);
210
- }
211
-
212
- .j-text--gold {
213
- color: var(--j-gold-text);
214
- }
215
-
216
- .j-text--green {
217
- color: var(--j-green-text);
218
- }
219
-
220
- .j-text--orange {
221
- color: var(--j-orange-text);
222
- }
223
-
224
- .j-text--purple {
225
- color: var(--j-purple);
226
- }
227
-
228
- .j-text--grey {
229
- color: var(--j-grey);
230
- }
231
-
232
-
233
- /* ── Panel ─────────────────────────────────────────────────────────────── */
234
-
235
- .j-panel {
236
- background-color: var(--j-dark-grey);
237
- border: 2px solid var(--j-border-silver);
238
- border-bottom-color: var(--j-border-south);
239
- border-radius: var(--j-radius-md);
240
- box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55),
241
- inset 0 0 0 1px rgba(255, 255, 255, 0.04);
242
- padding: var(--j-space-lg);
243
- display: flex;
244
- flex-direction: column;
245
- align-items: stretch;
246
- overflow: visible;
247
- position: relative;
248
- }
249
-
250
- .j-panel__body {
251
- flex: 1;
252
- overflow: auto;
253
- }
254
-
255
- .j-panel__back {
256
- margin-top: var(--j-space-lg);
257
- padding-top: var(--j-space-md);
258
- flex-shrink: 0;
259
- }
260
-
261
- .j-back-btn .j-btn__face {
262
- padding-top: 8px;
263
- padding-bottom: 8px;
264
- }
265
-
266
- .j-inner-panel {
267
- background-color: var(--j-inner-border);
268
- border: 2px solid var(--j-panel-edge);
269
- border-radius: var(--j-radius-md);
270
- padding: var(--j-space-lg);
271
- }
272
-
273
-
274
- /* ── Button ────────────────────────────────────────────────────────────── */
275
- /* Chunky 3D press: black underside via drop shadow,
276
- press sinks the face +3px and collapses the shadow. */
277
-
278
- .j-btn {
279
- appearance: none;
280
- -webkit-appearance: none;
281
- display: inline-block;
282
- position: relative;
283
- cursor: pointer;
284
- border: none;
285
- padding: 0;
286
- background: transparent;
287
- -webkit-user-select: none;
288
- user-select: none;
289
- }
290
-
291
- /* Invisible stable hit target to prevent hover jitter when the child transforms */
292
- .j-btn::after {
293
- content: '';
294
- position: absolute;
295
- inset: 0;
296
- background: transparent;
297
- z-index: 10;
298
- }
299
-
300
- .j-btn--full {
301
- width: 100%;
302
- }
303
-
304
- .j-btn--disabled {
305
- opacity: 0.55;
306
- cursor: not-allowed;
307
- }
308
-
309
- .j-btn__face {
310
- position: relative;
311
- border-radius: var(--j-radius-md);
312
- background: var(--j-btn-face-color, var(--j-orange));
313
- text-align: center;
314
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
315
- box-shadow: 0 var(--j-press-y) 0 0 rgba(0, 0, 0, 0.6);
316
- transform: translate(0, 0);
317
- transition: transform var(--j-press-speed) linear, box-shadow var(--j-press-speed) linear;
318
- }
319
-
320
- .j-btn[data-pressed="true"] .j-btn__face,
321
- .j-btn:active:not(:disabled):not(.j-btn--disabled) .j-btn__face {
322
- transform: translateY(var(--j-press-y));
323
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
324
- }
325
-
326
- .j-btn:not(.j-btn--disabled):hover .j-btn__face {
327
- filter: brightness(1.1);
328
- }
329
-
330
- /* Sizes */
331
- .j-btn--xs .j-btn__face {
332
- padding: 4px 8px;
333
- font-size: 11px;
334
- }
335
-
336
- .j-btn--sm .j-btn__face {
337
- padding: 6px 12px;
338
- font-size: 13px;
339
- }
340
-
341
- .j-btn--md .j-btn__face {
342
- padding: 10px 18px;
343
- font-size: 16px;
344
- }
345
-
346
- .j-btn--lg .j-btn__face {
347
- padding: 8px 18px;
348
- font-size: 20px;
349
- }
350
-
351
- /* Tone colors — set via CSS custom properties */
352
- .j-btn--orange {
353
- --j-btn-face-color: var(--j-orange);
354
- }
355
-
356
- .j-btn--red {
357
- --j-btn-face-color: var(--j-red);
358
- }
359
-
360
- .j-btn--blue {
361
- --j-btn-face-color: var(--j-blue);
362
- }
363
-
364
- .j-btn--green {
365
- --j-btn-face-color: var(--j-green);
366
- }
367
-
368
- .j-btn--tarot {
369
- --j-btn-face-color: var(--j-tarot-btn);
370
- }
371
-
372
- .j-btn--planet {
373
- --j-btn-face-color: var(--j-planet-btn);
374
- }
375
-
376
- .j-btn--spectral {
377
- --j-btn-face-color: var(--j-spectral-btn);
378
- }
379
-
380
-
381
- /* ── Badge ─────────────────────────────────────────────────────────────── */
382
-
383
- .j-badge {
384
- display: inline-flex;
385
- align-items: center;
386
- border-radius: var(--j-radius-sm);
387
- font-family: var(--j-font);
388
- font-weight: 400;
389
- letter-spacing: 0.04em;
390
- white-space: nowrap;
391
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
392
- border: none;
393
- }
394
-
395
- .j-badge--sm {
396
- padding: 2px 6px;
397
- font-size: 10px;
398
- }
399
-
400
- .j-badge--md {
401
- padding: 4px 8px;
402
- font-size: 12px;
403
- }
404
-
405
- /* Badge tones — flat, no shadow, no edges */
406
- .j-badge--dark {
407
- background: var(--j-darkest);
408
- color: var(--j-white);
409
- }
410
-
411
- .j-badge--blue {
412
- background: var(--j-blue);
413
- color: var(--j-white);
414
- }
415
-
416
- .j-badge--red {
417
- background: var(--j-red);
418
- color: var(--j-white);
419
- }
420
-
421
- .j-badge--green {
422
- background: var(--j-green);
423
- color: var(--j-white);
424
- }
425
-
426
- .j-badge--orange {
427
- background: var(--j-orange);
428
- color: var(--j-white);
429
- }
430
-
431
- .j-badge--purple {
432
- background: var(--j-purple);
433
- color: var(--j-white);
434
- }
435
-
436
-
437
- /* ── Tabs ──────────────────────────────────────────────────────────────── */
438
-
439
- .j-tabs {
440
- display: flex;
441
- gap: var(--j-space-sm);
442
- align-items: flex-end;
443
- justify-content: center;
444
- flex-wrap: nowrap;
445
- width: 100%;
446
- overflow-x: auto;
447
- scrollbar-width: none;
448
- }
449
- .j-tabs::-webkit-scrollbar { display: none; }
450
-
451
- .j-tab {
452
- display: flex;
453
- flex-direction: column;
454
- align-items: center;
455
- position: relative;
456
- flex: 0 0 auto;
457
- }
458
-
459
- .j-tab__indicator {
460
- height: 10px;
461
- margin-bottom: 3px;
462
- display: flex;
463
- justify-content: center;
464
- align-items: flex-end;
465
- }
466
-
467
- .j-tab__indicator svg {
468
- fill: var(--j-red);
469
- display: block;
470
- }
471
-
472
- .j-tab__indicator[data-active="true"] {
473
- animation: jimbo-bounce 0.6s ease-in-out infinite;
474
- }
475
-
476
- .j-tab__indicator[data-active="false"] {
477
- visibility: hidden;
478
- }
479
-
480
- .j-tab__btn {
481
- appearance: none;
482
- -webkit-appearance: none;
483
- border: none;
484
- cursor: pointer;
485
- border-radius: var(--j-radius-md);
486
- padding: 6px 14px;
487
- min-height: 28px;
488
- background: var(--j-red);
489
- box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.6);
490
- color: var(--j-white);
491
- text-align: center;
492
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
493
- transition: filter 80ms linear, opacity 80ms linear;
494
- outline: none;
495
- }
496
-
497
- .j-tab__btn[data-active="true"] {
498
- opacity: 1;
499
- }
500
-
501
- .j-tab__btn[data-active="true"]:hover {
502
- background: var(--j-red);
503
- }
504
-
505
- .j-tab__btn[data-active="false"]:hover {
506
- background: var(--j-red);
507
- filter: brightness(1.08);
508
- }
509
-
510
-
511
- @keyframes jimbo-bounce {
512
-
513
- 0%,
514
- 100% {
515
- transform: translateY(0);
516
- }
517
-
518
- 50% {
519
- transform: translateY(-3px);
520
- }
521
- }
522
-
523
- /* Vertical tabs */
524
- .j-vtabs {
525
- display: flex;
526
- flex-direction: column;
527
- gap: var(--j-space-sm);
528
- }
529
-
530
- .j-vtab {
531
- border: none;
532
- cursor: pointer;
533
- border-radius: 8px 0 0 8px;
534
- padding: 16px 8px;
535
- background-color: transparent;
536
- writing-mode: vertical-rl;
537
- text-orientation: mixed;
538
- transform: rotate(180deg);
539
- transition: none;
540
- }
541
-
542
- .j-vtab[data-active="true"] {
543
- background-color: var(--j-gold, #e4b643);
544
- color: var(--j-black, #000000);
545
- }
546
-
547
-
548
- /* ── Toggle List ──────────────────────────────────────────────────────── */
549
-
550
- .j-toggle-list {
551
- display: flex;
552
- flex-direction: column;
553
- gap: var(--j-space-sm);
554
- }
555
-
556
- .j-toggle-list__title {
557
- font-family: var(--j-font);
558
- font-size: 12px;
559
- color: var(--j-grey);
560
- text-transform: uppercase;
561
- letter-spacing: 0.04em;
562
- margin-bottom: var(--j-space-sm);
563
- }
564
-
565
- .j-toggle-item {
566
- display: flex;
567
- align-items: center;
568
- gap: var(--j-space-md);
569
- padding: 6px 8px;
570
- background: rgba(255, 255, 255, 0.05);
571
- border: 1px solid rgba(0, 0, 0, 0.2);
572
- border-radius: var(--j-radius-sm);
573
- cursor: pointer;
574
- font-family: var(--j-font);
575
- color: var(--j-white);
576
- text-transform: uppercase;
577
- letter-spacing: 0.04em;
578
- text-align: left;
579
- justify-content: flex-start;
580
- }
581
-
582
- .j-toggle-check {
583
- width: 10px;
584
- height: 10px;
585
- flex-shrink: 0;
586
- border: 1px solid var(--j-dark-grey);
587
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
588
- }
589
-
590
- .j-toggle-check[data-on="true"] {
591
- background: var(--j-orange);
592
- }
593
-
594
- .j-toggle-check[data-on="false"] {
595
- background: var(--j-darkest);
596
- }
597
-
598
-
599
- /* ── Tooltip ──────────────────────────────────────────────────────────── */
600
-
601
- .j-tooltip {
602
- position: fixed;
603
- max-width: 280px;
604
- padding: 6px 10px;
605
- border-radius: var(--j-radius-md);
606
- background: var(--j-darkest);
607
- border: 2px solid var(--j-border-silver);
608
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
609
- color: var(--j-white);
610
- pointer-events: none;
611
- z-index: 9999;
612
- transition: opacity 120ms ease;
613
- }
614
-
615
-
616
-
617
- /* ── Layout Utilities ─────────────────────────────────────────────────── */
618
-
619
- .j-flex {
620
- display: flex;
621
- }
622
-
623
- .j-flex-col {
624
- display: flex;
625
- flex-direction: column;
626
- }
627
-
628
- .j-items-center {
629
- align-items: center;
630
- }
631
-
632
- .j-items-start {
633
- align-items: flex-start;
634
- }
635
-
636
- .j-justify-center {
637
- justify-content: center;
638
- }
639
-
640
- .j-justify-between {
641
- justify-content: space-between;
642
- }
643
-
644
- .j-gap-xs { gap: var(--j-space-xs); }
645
- .j-gap-sm { gap: var(--j-space-sm); }
646
- .j-gap-md { gap: var(--j-space-md); }
647
- .j-gap-lg { gap: var(--j-space-lg); }
648
-
649
- .j-w-full { width: 100%; }
650
- .j-h-full { height: 100%; }
651
-
652
- .j-text-center { text-align: center; }
653
-
654
-
655
- /* ── Flank Nav ────────────────────────────────────────────────────────── */
656
-
657
- .j-flank {
658
- display: flex;
659
- align-items: stretch;
660
- justify-content: center;
661
- gap: var(--j-space-md);
662
- width: 100%;
663
- position: relative;
664
- }
665
-
666
- .j-flank__content {
667
- position: relative;
668
- flex: 1;
669
- min-width: 0;
670
- display: flex;
671
- flex-direction: column;
672
- }
673
-
674
- .j-flank__btn {
675
- flex-shrink: 0;
676
- width: 40px;
677
- margin: var(--j-press-y) 0;
678
- border: none;
679
- border-radius: var(--j-radius-lg);
680
- cursor: pointer;
681
- background-color: var(--j-red);
682
- color: var(--j-white);
683
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
684
- display: flex;
685
- align-items: center;
686
- justify-content: center;
687
- box-shadow: 0 var(--j-press-y) 0 0 var(--j-dark-red);
688
- transition: transform var(--j-press-speed) ease,
689
- box-shadow var(--j-press-speed) ease,
690
- background-color var(--j-press-speed) ease;
691
- }
692
-
693
- .j-flank__btn[data-pressed="true"] {
694
- transform: translateY(var(--j-press-y));
695
- box-shadow: none;
696
- }
697
-
698
- .j-flank__btn:disabled {
699
- background-color: var(--j-dark-red);
700
- cursor: default;
701
- box-shadow: none;
702
- }
703
-
704
-
705
- /* ── Copy Row ─────────────────────────────────────────────────────────── */
706
-
707
- .j-copy-row {
708
- display: flex;
709
- flex-direction: column;
710
- gap: var(--j-space-sm);
711
- }
712
-
713
- .j-copy-row__field {
714
- display: flex;
715
- align-items: center;
716
- gap: var(--j-space-md);
717
- }
718
-
719
- .j-copy-row__value {
720
- flex: 1;
721
- padding: 6px 10px;
722
- background: var(--j-darkest);
723
- border: 2px solid var(--j-panel-edge);
724
- border-radius: var(--j-radius-sm);
725
- word-break: break-all;
726
- }
727
-
728
- .j-copy-row__btn {
729
- font-family: var(--j-font);
730
- font-size: 11px;
731
- letter-spacing: 0.08em;
732
- border-radius: var(--j-radius-sm);
733
- padding: 4px 12px;
734
- cursor: pointer;
735
- flex-shrink: 0;
736
- transition: color 0.15s, background 0.15s, border-color 0.15s;
737
- }
738
-
739
- .j-copy-row__btn[data-copied="false"] {
740
- color: var(--j-gold-text);
741
- background: rgba(228, 182, 67, 0.12);
742
- border: 1px solid var(--j-gold-text);
743
- }
744
-
745
- .j-copy-row__btn[data-copied="true"] {
746
- color: var(--j-green-text);
747
- background: rgba(53, 189, 134, 0.12);
748
- border: 1px solid var(--j-green-text);
749
- }
750
-
751
-
752
- /* ── Code Block ───────────────────────────────────────────────────────── */
753
-
754
- .j-code-block {
755
- background-color: var(--j-darkest);
756
- border: 2px solid var(--j-panel-edge);
757
- border-radius: var(--j-radius-lg);
758
- box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
759
- overflow: hidden;
760
- display: flex;
761
- flex-direction: column;
762
- }
763
-
764
- .j-code-block__header {
765
- padding: 8px 12px;
766
- display: flex;
767
- align-items: center;
768
- justify-content: space-between;
769
- border-bottom: 1px solid var(--j-inner-border);
770
- }
771
-
772
- .j-code-block__meta {
773
- display: flex;
774
- gap: 8px;
775
- align-items: center;
776
- }
777
-
778
- .j-code-block__filename {
779
- font-size: 10px;
780
- opacity: 0.6;
781
- }
782
-
783
- .j-code-block__lang {
784
- font-size: 9px;
785
- padding: 1px 6px;
786
- border-radius: 3px;
787
- background: rgba(0, 0, 0, 0.4);
788
- color: #60a5fa;
789
- }
790
-
791
- .j-code-block__copy {
792
- padding: 4px;
793
- background: none;
794
- border: none;
795
- cursor: pointer;
796
- display: flex;
797
- }
798
-
799
- .j-code-block__copy[data-copied="false"] {
800
- color: rgba(255, 255, 255, 0.5);
801
- }
802
-
803
- .j-code-block__copy[data-copied="true"] {
804
- color: #4ade80;
805
- }
806
-
807
- .j-code-block__pre {
808
- padding: 12px;
809
- overflow-x: auto;
810
- font-family: var(--j-font-code);
811
- font-size: 0.875rem;
812
- line-height: 1.6;
813
- color: #f6f0d5;
814
- margin: 0;
815
- }
816
-
817
-
818
- /* ── Filter Bar ───────────────────────────────────────────────────────── */
819
-
820
- .j-filter-bar {
821
- display: flex;
822
- gap: 24px;
823
- padding: var(--j-space-xl);
824
- background-color: var(--j-dark-grey);
825
- border: 4px solid var(--j-border-silver);
826
- box-shadow: 0 3px 0 0 var(--j-border-south);
827
- border-radius: var(--j-radius-lg);
828
- position: relative;
829
- flex-wrap: wrap;
830
- }
831
-
832
- .j-filter-bar__field {
833
- flex: 1;
834
- min-width: 200px;
835
- position: relative;
836
- margin-top: 10px;
837
- }
838
-
839
- .j-filter-bar__pill {
840
- position: absolute;
841
- top: -14px;
842
- left: 16px;
843
- background-color: var(--j-red);
844
- border: 2px solid var(--j-dark-red);
845
- border-radius: var(--j-radius-md);
846
- padding: 4px 12px;
847
- z-index: 2;
848
- }
849
-
850
- .j-filter-bar__input {
851
- width: 100%;
852
- padding: 14px 16px 14px 48px;
853
- background-color: var(--j-darkest);
854
- border: none;
855
- border-bottom: 4px solid var(--j-panel-edge);
856
- border-radius: var(--j-radius-lg);
857
- color: var(--j-white);
858
- font-family: var(--j-font);
859
- font-size: 20px;
860
- letter-spacing: 0.08em;
861
- outline: none;
862
- }
863
-
864
- .j-filter-bar__search-icon {
865
- position: absolute;
866
- left: 0;
867
- top: 0;
868
- bottom: 0;
869
- width: 48px;
870
- display: flex;
871
- align-items: center;
872
- justify-content: center;
873
- pointer-events: none;
874
- color: var(--j-blue);
875
- z-index: 1;
876
- }
877
-
878
- .j-filter-bar__select {
879
- appearance: none;
880
- -webkit-appearance: none;
881
- -moz-appearance: none;
882
- background-color: var(--j-orange);
883
- color: var(--j-white);
884
- border: none;
885
- border-bottom: 4px solid var(--j-dark-orange);
886
- border-radius: var(--j-radius-lg);
887
- cursor: pointer;
888
- font-family: var(--j-font);
889
- font-size: 18px;
890
- letter-spacing: 0.08em;
891
- padding: 14px 48px 14px 24px;
892
- min-width: 200px;
893
- text-align: center;
894
- outline: none;
895
- }
896
-
897
- .j-filter-bar__sort-icon {
898
- position: absolute;
899
- right: 16px;
900
- top: 50%;
901
- transform: translateY(-50%);
902
- pointer-events: none;
903
- color: var(--j-white);
904
- opacity: 0.85;
905
- }
906
-
907
- /* ── FlankNav ───────────────────────────────────────────────────────────── */
908
-
909
- .j-flank {
910
- display: flex;
911
- align-items: center;
912
- justify-content: center;
913
- gap: var(--j-space-md);
914
- width: 100%;
915
- }
916
-
917
- .j-flank__content {
918
- flex: 1;
919
- display: flex;
920
- justify-content: center;
921
- }
922
-
923
- .j-flank__btn {
924
- background: var(--j-red);
925
- color: var(--j-white);
926
- border: none;
927
- border-radius: var(--j-radius-sm);
928
- padding: var(--j-space-sm) var(--j-space-xs);
929
- cursor: pointer;
930
- box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
931
- transition: transform 0.05s ease, box-shadow 0.05s ease, opacity 0.2s ease;
932
- display: flex;
933
- align-items: center;
934
- justify-content: center;
935
- }
936
-
937
- .j-flank__btn[data-pressed="true"] {
938
- transform: translateY(var(--j-press-y));
939
- box-shadow: 0 0 0 var(--j-dark-grey);
940
- }
941
-
942
- .j-flank__btn:disabled {
943
- opacity: 0.5;
944
- cursor: not-allowed;
945
- transform: none;
946
- box-shadow: 0 var(--j-press-y) 0 var(--j-dark-grey);
947
- }
948
-
949
-
950
- /* ── Modal ────────────────────────────────────────────────────────────── */
951
-
952
- @keyframes jimbo-modal-in {
953
- from { transform: scale(0.88); opacity: 0; }
954
- to { transform: scale(1); opacity: 1; }
955
- }
956
-
957
- .j-modal-overlay {
958
- position: absolute;
959
- inset: 0;
960
- z-index: 1000;
961
- display: flex;
962
- align-items: center;
963
- justify-content: center;
964
- padding: var(--j-space-md);
965
- background: rgba(0, 0, 0, 0.82);
966
- }
967
-
968
- .j-modal {
969
- width: 100%;
970
- max-width: 345px;
971
- max-height: calc(100% - 32px);
972
- display: flex;
973
- flex-direction: column;
974
- overflow: hidden;
975
- border-radius: 12px;
976
- animation: jimbo-modal-in 140ms cubic-bezier(0.2, 0, 0.2, 1.4) both;
977
- }
978
-
979
- .j-modal .j-panel__body {
980
- overflow-y: auto;
981
- min-height: 0;
982
- }
983
-
984
- .j-modal__title {
985
- text-align: center;
986
- margin: 0 0 var(--j-space-xl);
987
- flex-shrink: 0;
988
- }
989
-
990
-
991
- /* ── Footer ───────────────────────────────────────────────────────────── */
992
-
993
- .j-footer {
994
- width: 100%;
995
- transition: opacity 200ms;
996
- }
997
-
998
- .j-footer--hidden {
999
- pointer-events: none;
1000
- opacity: 0;
1001
- }
1002
-
1003
- .j-footer__bar {
1004
- width: 100%;
1005
- border-top: 1px solid rgba(255, 255, 255, 0.1);
1006
- background: rgba(0, 0, 0, 0.9);
1007
- padding: 0 1rem 3px;
1008
- text-align: center;
1009
- }
1010
-
1011
- .j-footer__text {
1012
- font-family: var(--j-font);
1013
- font-size: clamp(11px, 0.8vw + 8px, 14px);
1014
- display: flex;
1015
- flex-wrap: wrap;
1016
- align-items: center;
1017
- justify-content: center;
1018
- gap: 0 0.5rem;
1019
- color: white;
1020
- margin: 0;
1021
- }
1022
-
1023
- .j-footer__link {
1024
- color: var(--j-gold);
1025
- text-decoration: none;
1026
- }
1027
-
1028
-
1029
- /* ── Floating ─────────────────────────────────────────────────────────── */
1030
-
1031
- .j-floating {
1032
- position: absolute;
1033
- z-index: 20;
1034
- }
1035
-
1036
-
1037
- /* ── Background (canvas is styled inline because it's fixed fullscreen) ── */
1038
-
1039
-
1040
- /* ── GlowRing ─────────────────────────────────────────────────────────── */
1041
-
1042
- .j-glow--must {
1043
- box-shadow: 0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);
1044
- animation: j-glow-pulse 1.6s ease-in-out infinite;
1045
- }
1046
-
1047
- .j-glow--should {
1048
- box-shadow: 0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);
1049
- animation: j-glow-pulse 1.6s ease-in-out infinite;
1050
- }
1051
-
1052
- @keyframes j-glow-pulse {
1053
-
1054
- 0%,
1055
- 100% {
1056
- opacity: 0.55;
1057
- }
1058
-
1059
- 50% {
1060
- opacity: 1;
1061
- }
1062
- }
1063
-
1064
-
1065
- /* ── Utility ──────────────────────────────────────────────────────────── */
1066
-
1067
- .j-flex {
1068
- display: flex;
1069
- }
1070
-
1071
- .j-flex-col {
1072
- display: flex;
1073
- flex-direction: column;
1074
- }
1075
-
1076
- .j-flex-wrap {
1077
- flex-wrap: wrap;
1078
- }
1079
-
1080
- .j-items-center {
1081
- align-items: center;
1082
- }
1083
-
1084
- .j-justify-center {
1085
- justify-content: center;
1086
- }
1087
-
1088
- .j-gap-xs {
1089
- gap: var(--j-space-xs);
1090
- }
1091
-
1092
- .j-gap-sm {
1093
- gap: var(--j-space-sm);
1094
- }
1095
-
1096
- .j-gap-md {
1097
- gap: var(--j-space-md);
1098
- }
1099
-
1100
- .j-gap-lg {
1101
- gap: var(--j-space-lg);
1102
- }
1103
-
1104
- .j-gap-xl {
1105
- gap: var(--j-space-xl);
1106
- }
1107
-
1108
- .j-w-full {
1109
- width: 100%;
1110
- }
1111
-
1112
- .j-shrink-0 {
1113
- flex-shrink: 0;
1114
- }
1115
-
1116
- .j-flex-1 {
1117
- flex: 1;
1118
- }
1119
-
1120
- .j-min-w-0 {
1121
- min-width: 0;
1122
- }
1123
-
1124
- .j-text-center {
1125
- text-align: center;
1126
- }
1127
-
1128
- .j-overflow-hidden {
1129
- overflow: hidden;
1130
- }
1131
-
1132
- .j-overflow-auto {
1133
- overflow: auto;
1134
- }
1135
-
1136
- .j-relative {
1137
- position: relative;
1138
- }
1139
-
1140
- /* Tone border utilities */
1141
- .j-border--red {
1142
- border-color: var(--j-red);
1143
- }
1144
-
1145
- .j-border--blue {
1146
- border-color: var(--j-blue);
1147
- }
1148
-
1149
- .j-border--green {
1150
- border-color: var(--j-green);
1151
- }
1152
-
1153
- .j-border--gold {
1154
- border-color: var(--j-gold);
1155
- }
1156
-
1157
- .j-border--orange {
1158
- border-color: var(--j-orange);
1159
- }
1160
-
1161
- .j-border--purple {
1162
- border-color: var(--j-purple);
1163
- }
1164
-
1165
- /* Tone background utilities */
1166
- .j-bg--red {
1167
- background-color: var(--j-red);
1168
- }
1169
-
1170
- .j-bg--blue {
1171
- background-color: var(--j-blue);
1172
- }
1173
-
1174
- .j-bg--green {
1175
- background-color: var(--j-green);
1176
- }
1177
-
1178
- .j-bg--gold {
1179
- background-color: var(--j-gold);
1180
- }
1181
-
1182
- .j-bg--orange {
1183
- background-color: var(--j-orange);
1184
- }
1185
-
1186
- .j-bg--purple {
1187
- background-color: var(--j-purple);
1188
- }
1189
-
1190
- .j-bg--dark-grey {
1191
- background-color: var(--j-dark-grey);
1192
- }
1193
-
1194
- .j-bg--darkest {
1195
- background-color: var(--j-darkest);
1196
- }
1197
-
1198
- /* ── App Shell ────────────────────────────────────────────────────────── */
1199
- /* Mobile-first 320px layout container for ALL Jimbo UI screens.
1200
- * Supports container queries for responsive breakpoints:
1201
- * compact ≤400px — iPhone SE, fixed 568px height, NO scroll
1202
- * cozy 401-750px — MCP inline / wider phones, flexible height, scroll OK
1203
- * wide 751px+ — tablet/desktop, two-column layouts (future)
1204
- *
1205
- * Default = compact (hard lock). Add .j-app--fluid to unlock for MCP/desktop.
1206
- */
1207
-
1208
- .j-app {
1209
- container-type: inline-size;
1210
- container-name: jimbo;
1211
- width: 375px;
1212
- max-width: 375px;
1213
- height: 667px;
1214
- max-height: 667px;
1215
- margin: 0 auto;
1216
- display: flex;
1217
- flex-direction: column;
1218
- background: var(--j-darkest);
1219
- font-family: var(--j-font);
1220
- color: var(--j-white);
1221
- overflow: hidden;
1222
- position: relative;
1223
- }
1224
-
1225
- /* Fluid modifier — unlocks the container for MCP / desktop contexts. */
1226
- .j-app--fluid {
1227
- width: 100%;
1228
- max-width: 750px;
1229
- height: auto;
1230
- max-height: none;
1231
- min-height: 400px;
1232
- }
1233
-
1234
- .j-app__content {
1235
- flex: 1;
1236
- min-height: 0;
1237
- overflow: hidden;
1238
- padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
1239
- display: flex;
1240
- flex-direction: column;
1241
- }
1242
-
1243
- .j-app__scroll {
1244
- flex: 1;
1245
- min-height: 0;
1246
- overflow-y: auto;
1247
- overflow-x: hidden;
1248
- padding: var(--j-space-lg) var(--j-space-lg) var(--j-space-md);
1249
- scrollbar-width: none;
1250
- -ms-overflow-style: none;
1251
- }
1252
-
1253
- .j-app__scroll::-webkit-scrollbar {
1254
- display: none;
1255
- }
1256
-
1257
- .j-app__footer {
1258
- flex-shrink: 0;
1259
- padding: var(--j-space-md) var(--j-space-lg) var(--j-space-md);
1260
- border-top: 2px solid var(--j-black);
1261
- background: var(--j-dark-grey);
1262
- display: flex;
1263
- flex-direction: column;
1264
- gap: var(--j-space-sm);
1265
- }
1266
-
1267
- /* ── Cozy Breakpoint (401px+) ──────────────────────────────────────── */
1268
- /* Only activates when j-app--fluid is used AND container is wide enough. */
1269
-
1270
- @container jimbo (min-width: 401px) {
1271
- .j-app__content {
1272
- padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
1273
- }
1274
-
1275
- .j-app__scroll {
1276
- padding: var(--j-space-xl) var(--j-space-xl) var(--j-space-lg);
1277
- }
1278
-
1279
- .j-app__footer {
1280
- padding: var(--j-space-md) var(--j-space-xl) var(--j-space-lg);
1281
- }
1282
- }
1283
-
1284
- @container jimbo (min-width: 401px) {
1285
- .j-stat-grid__value {
1286
- font-size: 20px;
1287
- }
1288
-
1289
- .j-info-card {
1290
- padding: var(--j-space-md) var(--j-space-lg);
1291
- }
1292
-
1293
- .j-info-card__title {
1294
- font-size: 14px;
1295
- }
1296
-
1297
- .j-section-header__tag {
1298
- font-size: 12px;
1299
- }
1300
- }
1301
-
1302
-
1303
- /* ── Section Header ──────────────────────────────────────────────────── */
1304
- /* Colored tag + horizontal rule — reusable section divider. */
1305
-
1306
- .j-section-header {
1307
- display: flex;
1308
- align-items: center;
1309
- gap: var(--j-space-md);
1310
- margin-bottom: var(--j-space-md);
1311
- }
1312
-
1313
- .j-section-header__tag {
1314
- font-family: var(--j-font);
1315
- font-size: 11px;
1316
- letter-spacing: 2px;
1317
- padding: 2px 8px;
1318
- color: var(--j-white);
1319
- border-radius: 3px;
1320
- text-shadow: var(--j-text-shadow);
1321
- flex-shrink: 0;
1322
- }
1323
-
1324
- .j-section-header__rule {
1325
- flex: 1;
1326
- height: 2px;
1327
- border-radius: 1px;
1328
- opacity: 0.33;
1329
- }
1330
-
1331
-
1332
- /* ── Stat Grid ───────────────────────────────────────────────────────── */
1333
- /* 3-column stat bar — reusable primitive. */
1334
-
1335
- .j-stat-grid {
1336
- background: var(--j-dark-grey);
1337
- border-radius: var(--j-radius-md);
1338
- padding: var(--j-space-md);
1339
- border: 2px solid var(--j-panel-edge);
1340
- box-shadow: 0 2px 0 var(--j-black);
1341
- display: grid;
1342
- grid-template-columns: 1fr 1fr 1fr;
1343
- gap: var(--j-space-md);
1344
- text-align: center;
1345
- }
1346
-
1347
- .j-stat-grid__value {
1348
- font-family: var(--j-font);
1349
- font-size: 16px;
1350
- color: var(--j-gold-text);
1351
- text-shadow: var(--j-text-shadow);
1352
- }
1353
-
1354
- .j-stat-grid__label {
1355
- font-family: var(--j-font);
1356
- font-size: 9px;
1357
- color: var(--j-grey);
1358
- letter-spacing: 2px;
1359
- margin-top: 2px;
1360
- }
1361
-
1362
-
1363
- /* ── Info Card ───────────────────────────────────────────────────────── */
1364
- /* Generic clickable row card — used for filter lists, seed lists, etc. */
1365
-
1366
- .j-info-card {
1367
- background: var(--j-dark-grey);
1368
- border-radius: var(--j-radius-md);
1369
- padding: var(--j-space-md);
1370
- box-shadow: 0 2px 0 var(--j-black);
1371
- display: flex;
1372
- align-items: center;
1373
- gap: var(--j-space-md);
1374
- cursor: pointer;
1375
- border: 2px solid transparent;
1376
- }
1377
-
1378
- .j-info-card:hover {
1379
- filter: brightness(1.08);
1380
- }
1381
-
1382
- .j-info-card__body {
1383
- flex: 1;
1384
- min-width: 0;
1385
- }
1386
-
1387
- .j-info-card__title {
1388
- font-family: var(--j-font);
1389
- font-size: 13px;
1390
- color: var(--j-white);
1391
- letter-spacing: 1px;
1392
- text-shadow: var(--j-text-shadow);
1393
- overflow: hidden;
1394
- text-overflow: ellipsis;
1395
- white-space: nowrap;
1396
- }
1397
-
1398
- .j-info-card__sub {
1399
- font-family: var(--j-font);
1400
- font-size: 9px;
1401
- color: var(--j-gold-text);
1402
- letter-spacing: 1px;
1403
- margin-top: 2px;
1404
- }
1405
-
1406
- .j-info-card__aside {
1407
- text-align: right;
1408
- flex-shrink: 0;
1409
- }
1410
-
1411
-
1412
- /* ── Inset Box ───────────────────────────────────────────────────────── */
1413
- /* Dark recessed content area — for log output, recent finds, etc. */
1414
-
1415
- .j-inset {
1416
- background: var(--j-dark-grey);
1417
- border-radius: var(--j-radius-md);
1418
- padding: var(--j-space-md) var(--j-space-md);
1419
- border: 2px solid var(--j-panel-edge);
1420
- box-shadow: 0 2px 0 var(--j-black);
1421
- font-family: var(--j-font);
1422
- font-size: 11px;
1423
- color: var(--j-grey);
1424
- letter-spacing: 1px;
1425
- line-height: 1.7;
1426
- }
1427
-
1428
-
1429
- /* ── Wordmark ────────────────────────────────────────────────────────── */
1430
- /* Title + subtitle hero block. */
1431
-
1432
- .j-wordmark {
1433
- text-align: center;
1434
- margin-bottom: var(--j-space-xl);
1435
- }
1436
-
1437
- .j-wordmark__title {
1438
- font-family: var(--j-font);
1439
- font-size: 32px;
1440
- letter-spacing: 3px;
1441
- line-height: 1;
1442
- color: var(--j-gold-text);
1443
- text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
1444
- }
1445
-
1446
- .j-wordmark__sub {
1447
- font-family: var(--j-font);
1448
- font-size: 14px;
1449
- letter-spacing: 4px;
1450
- color: var(--j-grey);
1451
- margin-top: 4px;
1452
- text-shadow: var(--j-text-shadow);
1453
- }
1454
-
1455
-
1456
- /* ── Seed Input ───────────────────────────────────────────────────────── */
1457
-
1458
- .j-seed-input {
1459
- display: flex;
1460
- flex-direction: column;
1461
- gap: var(--j-space-sm);
1462
- }
1463
-
1464
- .j-seed-input__field {
1465
- width: 100%;
1466
- padding: 8px 12px;
1467
- border-radius: var(--j-radius-md);
1468
- border: 2px solid var(--j-panel-edge);
1469
- background: var(--j-darkest);
1470
- color: var(--j-gold-text);
1471
- font-size: 18px;
1472
- font-family: var(--j-font);
1473
- font-weight: 400;
1474
- letter-spacing: 0.12em;
1475
- text-transform: uppercase;
1476
- text-shadow: var(--j-text-shadow);
1477
- outline: none;
1478
- transition: border-color 100ms ease;
1479
- box-sizing: border-box;
1480
- }
1481
-
1482
- .j-seed-input__field::placeholder {
1483
- color: var(--j-grey);
1484
- opacity: 0.6;
1485
- text-transform: uppercase;
1486
- letter-spacing: 0.06em;
1487
- font-size: 12px;
1488
- }
1489
-
1490
- .j-seed-input__field:focus {
1491
- border-color: var(--j-gold);
1492
- }
1493
-
1494
- .j-seed-input__field[data-valid="true"] {
1495
- border-color: var(--j-green);
1496
- }
1497
-
1498
- .j-seed-input__field[data-valid="false"] {
1499
- border-color: var(--j-red);
1500
- }
1501
-
1502
- .j-seed-input__field[data-valid="partial"] {
1503
- border-color: var(--j-panel-edge);
1504
- }
1505
-
1506
- .j-seed-input__hint {
1507
- font-family: var(--j-font);
1508
- font-size: 9px;
1509
- letter-spacing: 0.08em;
1510
- color: var(--j-grey);
1511
- text-shadow: var(--j-text-shadow);
1512
- }
1513
-
1514
-
1515
- /* ── Aesthetic Selector ──────────────────────────────────────────────── */
1516
-
1517
- .j-aesthetic-selector {
1518
- display: flex;
1519
- flex-direction: column;
1520
- gap: var(--j-space-sm);
1521
- }
1522
-
1523
- .j-aesthetic-selector__list {
1524
- display: flex;
1525
- flex-wrap: wrap;
1526
- gap: var(--j-space-sm);
1527
- }
1528
-
1529
- .j-aesthetic-pill {
1530
- padding: 4px 10px;
1531
- border-radius: var(--j-radius-md);
1532
- border: 2px solid var(--j-panel-edge);
1533
- background: var(--j-darkest);
1534
- color: var(--j-grey);
1535
- cursor: pointer;
1536
- font-size: 11px;
1537
- font-family: var(--j-font);
1538
- font-weight: 400;
1539
- letter-spacing: 0.04em;
1540
- text-shadow: var(--j-text-shadow);
1541
- transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
1542
- box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3);
1543
- }
1544
-
1545
- .j-aesthetic-pill:hover {
1546
- border-color: var(--j-gold);
1547
- color: var(--j-gold-text);
1548
- }
1549
-
1550
- .j-aesthetic-pill[data-active="true"] {
1551
- border-color: var(--j-gold);
1552
- background: rgba(228, 182, 67, 0.13);
1553
- color: var(--j-gold-text);
1554
- box-shadow: 0 0 0 1px var(--j-gold), 0 2px 0 0 rgba(0, 0, 0, 0.3);
1555
- }
1556
-
1557
-
1558
- /* ── Showcase ─────────────────────────────────────────────────────────── */
1559
-
1560
- .j-showcase {
1561
- width: 100%;
1562
- height: 100%;
1563
- background: var(--j-darkest);
1564
- display: flex;
1565
- flex-direction: column;
1566
- font-family: var(--j-font);
1567
- color: var(--j-white);
1568
- overflow: hidden;
1569
- }
1570
-
1571
- .j-showcase__scroll {
1572
- flex: 1;
1573
- min-height: 0;
1574
- overflow-y: auto;
1575
- padding: 18px 14px 10px;
1576
- }
1577
-
1578
- .j-showcase__wordmark {
1579
- text-align: center;
1580
- margin-bottom: 18px;
1581
- }
1582
-
1583
- .j-showcase__wordmark-title {
1584
- font-size: 32px;
1585
- letter-spacing: 3px;
1586
- line-height: 1;
1587
- color: var(--j-gold-text);
1588
- text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
1589
- }
1590
-
1591
- .j-showcase__wordmark-sub {
1592
- font-size: 14px;
1593
- letter-spacing: 4px;
1594
- color: var(--j-grey);
1595
- margin-top: 4px;
1596
- text-shadow: var(--j-text-shadow);
1597
- }
1598
-
1599
- .j-showcase__stats {
1600
- background: var(--j-dark-grey);
1601
- border-radius: var(--j-radius-md);
1602
- padding: 10px;
1603
- border: 2px solid var(--j-panel-edge);
1604
- box-shadow: 0 2px 0 var(--j-black);
1605
- display: grid;
1606
- grid-template-columns: 1fr 1fr 1fr;
1607
- gap: var(--j-space-md);
1608
- text-align: center;
1609
- margin-bottom: var(--j-space-xl);
1610
- }
1611
-
1612
- .j-showcase__stat-value {
1613
- font-size: 16px;
1614
- color: var(--j-gold-text);
1615
- text-shadow: var(--j-text-shadow);
1616
- }
1617
-
1618
- .j-showcase__stat-label {
1619
- font-size: 9px;
1620
- color: var(--j-grey);
1621
- letter-spacing: 2px;
1622
- margin-top: 2px;
1623
- }
1624
-
1625
- .j-showcase__section-header {
1626
- display: flex;
1627
- align-items: center;
1628
- gap: var(--j-space-md);
1629
- margin-bottom: var(--j-space-md);
1630
- }
1631
-
1632
- .j-showcase__section-tag {
1633
- font-size: 11px;
1634
- letter-spacing: 2px;
1635
- padding: 2px 8px;
1636
- color: var(--j-white);
1637
- border-radius: 3px;
1638
- text-shadow: var(--j-text-shadow);
1639
- }
1640
-
1641
- .j-showcase__section-rule {
1642
- flex: 1;
1643
- height: 2px;
1644
- border-radius: 1px;
1645
- }
1646
-
1647
- .j-showcase__filter-list {
1648
- display: flex;
1649
- flex-direction: column;
1650
- gap: var(--j-space-md);
1651
- margin-bottom: var(--j-space-xl);
1652
- }
1653
-
1654
- .j-showcase__filter-card {
1655
- background: var(--j-dark-grey);
1656
- border-radius: var(--j-radius-md);
1657
- padding: 10px;
1658
- box-shadow: 0 2px 0 var(--j-black);
1659
- display: flex;
1660
- align-items: center;
1661
- gap: 10px;
1662
- cursor: pointer;
1663
- }
1664
-
1665
- .j-showcase__filter-sprites {
1666
- display: flex;
1667
- gap: 2px;
1668
- }
1669
-
1670
- .j-showcase__filter-sprite {
1671
- width: 30px;
1672
- height: 40px;
1673
- display: flex;
1674
- align-items: center;
1675
- justify-content: center;
1676
- }
1677
-
1678
- .j-showcase__filter-info {
1679
- flex: 1;
1680
- min-width: 0;
1681
- }
1682
-
1683
- .j-showcase__filter-name {
1684
- font-size: 13px;
1685
- color: var(--j-white);
1686
- letter-spacing: 1px;
1687
- text-shadow: var(--j-text-shadow);
1688
- overflow: hidden;
1689
- text-overflow: ellipsis;
1690
- white-space: nowrap;
1691
- }
1692
-
1693
- .j-showcase__filter-author {
1694
- font-size: 9px;
1695
- color: var(--j-gold-text);
1696
- letter-spacing: 1px;
1697
- margin-top: 2px;
1698
- }
1699
-
1700
- .j-showcase__filter-hits {
1701
- text-align: right;
1702
- }
1703
-
1704
- .j-showcase__filter-hits-value {
1705
- font-size: 14px;
1706
- text-shadow: var(--j-text-shadow);
1707
- }
1708
-
1709
- .j-showcase__filter-hits-label {
1710
- font-size: 8px;
1711
- color: var(--j-grey);
1712
- letter-spacing: 1px;
1713
- }
1714
-
1715
- .j-showcase__recent {
1716
- background: var(--j-dark-grey);
1717
- border-radius: var(--j-radius-md);
1718
- padding: 8px 10px;
1719
- border: 2px solid var(--j-panel-edge);
1720
- box-shadow: 0 2px 0 var(--j-black);
1721
- font-size: 11px;
1722
- color: var(--j-grey);
1723
- letter-spacing: 1px;
1724
- line-height: 1.7;
1725
- }
1726
-
1727
- .j-showcase__actions {
1728
- padding: 8px 10px 10px;
1729
- border-top: 2px solid var(--j-black);
1730
- background: var(--j-dark-grey);
1731
- display: flex;
1732
- flex-direction: column;
1733
- gap: 6px;
1734
- }
1735
-
1736
-
1737
- /* ── Footer suit animation ────────────────────────────────────────────── */
1738
-
1739
- .j-footer__suits {
1740
- display: inline-flex;
1741
- align-items: center;
1742
- }
1743
-
1744
- .j-footer__suit-stage {
1745
- position: relative;
1746
- display: inline-block;
1747
- width: 1.5em;
1748
- height: 1em;
1749
- vertical-align: middle;
1750
- }
1751
-
1752
- .j-footer__suit-char {
1753
- position: absolute;
1754
- inset: 0;
1755
- display: inline-flex;
1756
- align-items: center;
1757
- justify-content: center;
1758
- opacity: 0;
1759
- animation-duration: 5s;
1760
- animation-delay: 0s;
1761
- animation-iteration-count: infinite;
1762
- animation-timing-function: ease-out;
1763
- }
1764
-
1765
-
1766
- /* ── Copy row label ───────────────────────────────────────────────────── */
1767
-
1768
- .j-copy-row__label {
1769
- letter-spacing: 2px;
1770
- }
1771
-
1772
-
1773
- /* ── Motely version badge ─────────────────────────────────────────────── */
1774
-
1775
- .j-motely-badge {
1776
- display: inline-flex;
1777
- align-items: center;
1778
- gap: 6px;
1779
- }
1780
-
1781
- .j-motely-badge--chip {
1782
- padding: 3px 8px;
1783
- border-radius: var(--j-radius-sm);
1784
- background: var(--j-darkest);
1785
- border: 1px solid var(--j-panel-edge);
1786
- }
1787
-
1788
- /* ── Font Dance Animation ─────────────────────────────────────────────── */
1789
-
1790
- @keyframes j-font-dance {
1791
- 0% {
1792
- transform: translateY(0);
1793
- }
1794
-
1795
- 25% {
1796
- transform: translateY(-1px);
1797
- }
1798
-
1799
- 50% {
1800
- transform: translateY(0);
1801
- }
1802
-
1803
- 75% {
1804
- transform: translateY(1px);
1805
- }
1806
-
1807
- 100% {
1808
- transform: translateY(0);
1809
- }
1810
- }
1811
-
1812
- .j-text--dance-container {
1813
- display: inline-flex;
1814
- }
1815
-
1816
- .j-font-dance-char {
1817
- display: inline-block;
1818
- animation: j-font-dance 3s infinite ease-in-out;
1819
- }
1820
-
1821
- .hide-scrollbar {
1822
- scrollbar-width: none;
1823
- -ms-overflow-style: none;
1824
- }
1825
-
1826
- .hide-scrollbar::-webkit-scrollbar {
1827
- display: none;
1828
- }
1829
-
1830
- .j-juice-hover {
1831
- transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
1832
- }
1833
-
1834
- .j-juice-hover:hover {
1835
- transform: scale(1.05) translateY(-2px);
1836
- z-index: 5;
1837
- }
1
+ @font-face{font-family:m6x11plus;src:url(/fonts/m6x11plus.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}*{scrollbar-width:none!important;-ms-overflow-style:none!important}::-webkit-scrollbar{display:none!important}:root{--j-red:#fe5148;--j-blue:#0093ff;--j-green:#429f79;--j-orange:#ff9800;--j-gold:#e4b643;--j-purple:#9e74ce;--j-dark-red:#a02721;--j-dark-blue:#0057a1;--j-dark-orange:#a05b00;--j-dark-green:#215f46;--j-dark-purple:#5e437e;--j-dark-grey:#3a5055;--j-darkest:#1e2b2d;--j-grey:#708386;--j-teal-grey:#404c4e;--j-panel-edge:#1e2e32;--j-inner-border:#334461;--j-border-silver:#b9c2d2;--j-border-south:#777e89;--j-gold-text:#e4b643;--j-green-text:#35bd86;--j-orange-text:#ff8f00;--j-white:#fff;--j-black:#000;--j-tarot-btn:#9e74ce;--j-planet-btn:#00a7ca;--j-spectral-btn:#2e76fd;--j-tarot-btn-dark:#5e437e;--j-planet-btn-dark:#00657c;--j-spectral-btn-dark:#14449e;--j-font:"m6x11plus", "Courier New", monospace;--j-font-code:"JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono", SFMono-Regular, Menlo, Consolas, ui-monospace, "Courier New", monospace;--j-text-shadow:1px 1px 0 #000c;--j-space-xs:2px;--j-space-sm:4px;--j-space-md:8px;--j-space-lg:12px;--j-space-xl:16px;--j-radius-sm:4px;--j-radius-md:6px;--j-radius-lg:8px;--j-radius-pill:10px;--j-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--j-press-y:3px;--j-press-speed:55ms}.j-text{font-family:var(--j-font);text-shadow:var(--j-text-shadow);color:var(--j-white);font-weight:400;line-height:1.2}.j-text--no-shadow{text-shadow:none}.j-text--upper{text-transform:uppercase;letter-spacing:.08em}.j-text--dance-container{white-space:pre-wrap;display:inline-block}@keyframes j-font-dance{0%{transform:translateY(0)}25%{transform:translateY(-1px)}50%{transform:translateY(0)}75%{transform:translateY(1px)}to{transform:translateY(0)}}.j-text--display{letter-spacing:.04em;font-size:26px;line-height:1}.j-text--xl{letter-spacing:.04em;font-size:24px}.j-text--lg{letter-spacing:.04em;font-size:18px}.j-text--heading{letter-spacing:.08em;font-size:14px;line-height:1.2}.j-text--md{font-size:14px}.j-text--sm{font-size:12px}.j-text--body{letter-spacing:.05em;font-size:11px;line-height:1.3}.j-text--xs{font-size:10px}.j-text--label{letter-spacing:.1em;text-transform:uppercase;font-size:9px;line-height:1}.j-text--micro{letter-spacing:.08em;font-size:8px;line-height:1}.j-text--default{color:var(--j-white)}.j-text--mult,.j-text--red{color:var(--j-red)}.j-text--chips,.j-text--blue{color:var(--j-blue)}.j-text--gold{color:var(--j-gold-text)}.j-text--green{color:var(--j-green-text)}.j-text--orange{color:var(--j-orange-text)}.j-text--purple{color:var(--j-purple)}.j-text--grey{color:var(--j-grey)}.j-panel{background-color:var(--j-dark-grey);border:2px solid var(--j-border-silver);border-bottom-color:var(--j-border-south);border-radius:var(--j-radius-md);padding:var(--j-space-lg);flex-direction:column;align-items:stretch;display:flex;position:relative;overflow:visible;box-shadow:0 3px #0000008c,inset 0 0 0 1px #ffffff0a}.j-panel__body{flex:1;overflow:auto}.j-panel__back{margin-top:var(--j-space-lg);padding-top:var(--j-space-md);flex-shrink:0}.j-back-btn .j-btn__face{padding-top:8px;padding-bottom:8px}.j-inner-panel{background-color:var(--j-inner-border);border:2px solid var(--j-panel-edge);border-radius:var(--j-radius-md);padding:var(--j-space-lg)}.j-btn{appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;padding:0;display:inline-block;position:relative}.j-btn:after{content:"";z-index:10;background:0 0;position:absolute;inset:0}.j-btn--full{width:100%}.j-btn--disabled{opacity:.55;cursor:not-allowed}.j-btn__face{border-radius:var(--j-radius-md);background:var(--j-btn-face-color,var(--j-orange));text-align:center;text-shadow:1px 1px #000c;box-shadow:0 var(--j-press-y) 0 0 #0009;transition:transform var(--j-press-speed) linear, box-shadow var(--j-press-speed) linear;position:relative;transform:translate(0)}.j-btn[data-pressed=true] .j-btn__face,.j-btn:active:not(:disabled):not(.j-btn--disabled) .j-btn__face{transform:translateY(var(--j-press-y));box-shadow:0 0 #0009}.j-btn:not(.j-btn--disabled):hover .j-btn__face{filter:brightness(1.1)}.j-btn--xs .j-btn__face{padding:4px 8px;font-size:11px}.j-btn--sm .j-btn__face{padding:6px 12px;font-size:13px}.j-btn--md .j-btn__face{padding:10px 18px;font-size:16px}.j-btn--lg .j-btn__face{padding:8px 18px;font-size:20px}.j-btn--orange{--j-btn-face-color:var(--j-orange)}.j-btn--red{--j-btn-face-color:var(--j-red)}.j-btn--blue{--j-btn-face-color:var(--j-blue)}.j-btn--green{--j-btn-face-color:var(--j-green)}.j-btn--tarot{--j-btn-face-color:var(--j-tarot-btn)}.j-btn--planet{--j-btn-face-color:var(--j-planet-btn)}.j-btn--spectral{--j-btn-face-color:var(--j-spectral-btn)}.j-badge{border-radius:var(--j-radius-sm);font-family:var(--j-font);letter-spacing:.04em;white-space:nowrap;text-shadow:1px 1px #000c;border:none;align-items:center;font-weight:400;display:inline-flex}.j-badge--sm{padding:2px 6px;font-size:10px}.j-badge--md{padding:4px 8px;font-size:12px}.j-badge--dark{background:var(--j-darkest);color:var(--j-white)}.j-badge--blue{background:var(--j-blue);color:var(--j-white)}.j-badge--red{background:var(--j-red);color:var(--j-white)}.j-badge--green{background:var(--j-green);color:var(--j-white)}.j-badge--orange{background:var(--j-orange);color:var(--j-white)}.j-badge--purple{background:var(--j-purple);color:var(--j-white)}.j-tabs{gap:var(--j-space-sm);scrollbar-width:none;flex-wrap:nowrap;justify-content:center;align-items:flex-end;width:100%;display:flex;overflow-x:auto}.j-tabs::-webkit-scrollbar{display:none}.j-tab{flex-direction:column;flex:none;align-items:center;display:flex;position:relative}.j-tab__indicator{justify-content:center;align-items:flex-end;height:10px;margin-bottom:3px;display:flex}.j-tab__indicator svg{fill:var(--j-red);display:block}.j-tab__indicator[data-active=true]{animation:.6s ease-in-out infinite jimbo-bounce}.j-tab__indicator[data-active=false]{visibility:hidden}.j-tab__btn{appearance:none;cursor:pointer;border-radius:var(--j-radius-md);background:var(--j-red);min-height:28px;color:var(--j-white);text-align:center;text-shadow:1px 1px #000c;border:none;outline:none;padding:6px 14px;transition:filter 80ms linear,opacity 80ms linear;box-shadow:0 3px #0009}.j-tab__btn[data-active=true]{opacity:1}.j-tab__btn[data-active=true]:hover{background:var(--j-red)}.j-tab__btn[data-active=false]:hover{background:var(--j-red);filter:brightness(1.08)}@keyframes jimbo-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.j-vtabs{gap:var(--j-space-sm);flex-direction:column;display:flex}.j-vtab{cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;background-color:#0000;border:none;border-radius:8px 0 0 8px;padding:16px 8px;transition:none;transform:rotate(180deg)}.j-vtab[data-active=true]{background-color:var(--j-gold,#e4b643);color:var(--j-black,#000)}.j-toggle-list{gap:var(--j-space-sm);flex-direction:column;display:flex}.j-toggle-list__title{font-family:var(--j-font);color:var(--j-grey);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--j-space-sm);font-size:12px}.j-toggle-item{align-items:center;gap:var(--j-space-md);border-radius:var(--j-radius-sm);cursor:pointer;font-family:var(--j-font);color:var(--j-white);text-transform:uppercase;letter-spacing:.04em;text-align:left;background:#ffffff0d;border:1px solid #0003;justify-content:flex-start;padding:6px 8px;display:flex}.j-toggle-check{border:1px solid var(--j-dark-grey);flex-shrink:0;width:10px;height:10px;box-shadow:inset 0 1px 2px #00000080}.j-toggle-check[data-on=true]{background:var(--j-orange)}.j-toggle-check[data-on=false]{background:var(--j-darkest)}.j-tooltip{border-radius:var(--j-radius-md);background:var(--j-darkest);border:2px solid var(--j-border-silver);max-width:280px;color:var(--j-white);pointer-events:none;z-index:9999;padding:6px 10px;transition:opacity .12s;position:fixed;box-shadow:0 2px #000c}.j-items-start{align-items:flex-start}.j-justify-between{justify-content:space-between}.j-h-full{height:100%}.j-flank{justify-content:center;align-items:stretch;gap:var(--j-space-md);width:100%;display:flex;position:relative}.j-flank__content{flex-direction:column;flex:1;min-width:0;display:flex;position:relative}.j-flank__btn{width:40px;margin:var(--j-press-y) 0;border-radius:var(--j-radius-lg);cursor:pointer;background-color:var(--j-red);color:var(--j-white);text-shadow:1px 1px #000c;box-shadow:0 var(--j-press-y) 0 0 var(--j-dark-red);transition:transform var(--j-press-speed) ease, box-shadow var(--j-press-speed) ease, background-color var(--j-press-speed) ease;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.j-flank__btn:disabled{background-color:var(--j-dark-red);cursor:default;box-shadow:none}.j-copy-row{gap:var(--j-space-sm);flex-direction:column;display:flex}.j-copy-row__field{align-items:center;gap:var(--j-space-md);display:flex}.j-copy-row__value{background:var(--j-darkest);border:2px solid var(--j-panel-edge);border-radius:var(--j-radius-sm);word-break:break-all;flex:1;padding:6px 10px}.j-copy-row__btn{font-family:var(--j-font);letter-spacing:.08em;border-radius:var(--j-radius-sm);cursor:pointer;flex-shrink:0;padding:4px 12px;font-size:11px;transition:color .15s,background .15s,border-color .15s}.j-copy-row__btn[data-copied=false]{color:var(--j-gold-text);border:1px solid var(--j-gold-text);background:#e4b6431f}.j-copy-row__btn[data-copied=true]{color:var(--j-green-text);border:1px solid var(--j-green-text);background:#35bd861f}.j-code-block{background-color:var(--j-darkest);border:2px solid var(--j-panel-edge);border-radius:var(--j-radius-lg);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 3px #00000080}.j-code-block__header{border-bottom:1px solid var(--j-inner-border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.j-code-block__meta{align-items:center;gap:8px;display:flex}.j-code-block__filename{opacity:.6;font-size:10px}.j-code-block__lang{color:#60a5fa;background:#0006;border-radius:3px;padding:1px 6px;font-size:9px}.j-code-block__copy{cursor:pointer;background:0 0;border:none;padding:4px;display:flex}.j-code-block__copy[data-copied=false]{color:#ffffff80}.j-code-block__copy[data-copied=true]{color:#4ade80}.j-code-block__pre{font-family:var(--j-font-code);color:#f6f0d5;margin:0;padding:12px;font-size:.875rem;line-height:1.6;overflow-x:auto}.j-filter-bar{padding:var(--j-space-xl);background-color:var(--j-dark-grey);border:4px solid var(--j-border-silver);box-shadow:0 3px 0 0 var(--j-border-south);border-radius:var(--j-radius-lg);flex-wrap:wrap;gap:24px;display:flex;position:relative}.j-filter-bar__field{flex:1;min-width:200px;margin-top:10px;position:relative}.j-filter-bar__pill{background-color:var(--j-red);border:2px solid var(--j-dark-red);border-radius:var(--j-radius-md);z-index:2;padding:4px 12px;position:absolute;top:-14px;left:16px}.j-filter-bar__input{background-color:var(--j-darkest);border:none;border-bottom:4px solid var(--j-panel-edge);border-radius:var(--j-radius-lg);width:100%;color:var(--j-white);font-family:var(--j-font);letter-spacing:.08em;outline:none;padding:14px 16px 14px 48px;font-size:20px}.j-filter-bar__search-icon{pointer-events:none;width:48px;color:var(--j-blue);z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0}.j-filter-bar__select{appearance:none;background-color:var(--j-orange);color:var(--j-white);border:none;border-bottom:4px solid var(--j-dark-orange);border-radius:var(--j-radius-lg);cursor:pointer;font-family:var(--j-font);letter-spacing:.08em;text-align:center;outline:none;min-width:200px;padding:14px 48px 14px 24px;font-size:18px}.j-filter-bar__sort-icon{pointer-events:none;color:var(--j-white);opacity:.85;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.j-flank{justify-content:center;align-items:center;gap:var(--j-space-md);width:100%;display:flex}.j-flank__content{flex:1;justify-content:center;display:flex}.j-flank__btn{background:var(--j-red);color:var(--j-white);border-radius:var(--j-radius-sm);padding:var(--j-space-sm) var(--j-space-xs);cursor:pointer;box-shadow:0 var(--j-press-y) 0 var(--j-dark-grey);border:none;justify-content:center;align-items:center;transition:transform 50ms,box-shadow 50ms,opacity .2s;display:flex}.j-flank__btn[data-pressed=true]{transform:translateY(var(--j-press-y));box-shadow:0 0 0 var(--j-dark-grey)}.j-flank__btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 var(--j-press-y) 0 var(--j-dark-grey);transform:none}@keyframes jimbo-modal-in{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}.j-modal-overlay{z-index:1000;padding:var(--j-space-md);background:#000000d1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.j-modal{border-radius:12px;flex-direction:column;width:100%;max-width:345px;max-height:calc(100% - 32px);animation:.14s cubic-bezier(.2,0,.2,1.4) both jimbo-modal-in;display:flex;overflow:hidden}.j-modal .j-panel__body{min-height:0;overflow-y:auto}.j-modal__title{text-align:center;margin:0 0 var(--j-space-xl);flex-shrink:0}.j-footer{z-index:9998;pointer-events:auto;width:100%;position:fixed;bottom:0;left:0;right:0}.j-footer__bar{text-align:center;background:#000000e6;border-top:1px solid #ffffff1a;width:100%;padding:0 1rem 3px}.j-footer__text{font-family:var(--j-font);color:#fff;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .5rem;margin:0;font-size:clamp(11px,.8vw + 8px,14px);display:flex}.j-footer__link{color:var(--j-gold);text-decoration:none}.j-floating{z-index:20;position:absolute}.j-glow--must{box-shadow:0 0 0 2px var(--j-blue), 0 0 10px var(--j-blue);animation:1.6s ease-in-out infinite j-glow-pulse}.j-glow--should{box-shadow:0 0 0 2px var(--j-gold), 0 0 10px var(--j-gold);animation:1.6s ease-in-out infinite j-glow-pulse}@keyframes j-glow-pulse{0%,to{opacity:.55}50%{opacity:1}}.j-flex{display:flex}.j-flex-col{flex-direction:column;display:flex}.j-flex-wrap{flex-wrap:wrap}.j-items-center{align-items:center}.j-justify-center{justify-content:center}.j-gap-xs{gap:var(--j-space-xs)}.j-gap-sm{gap:var(--j-space-sm)}.j-gap-md{gap:var(--j-space-md)}.j-gap-lg{gap:var(--j-space-lg)}.j-gap-xl{gap:var(--j-space-xl)}.j-w-full{width:100%}.j-shrink-0{flex-shrink:0}.j-flex-1{flex:1}.j-min-w-0{min-width:0}.j-text-center{text-align:center}.j-overflow-hidden{overflow:hidden}.j-overflow-auto{overflow:auto}.j-relative{position:relative}.j-border--red{border-color:var(--j-red)}.j-border--blue{border-color:var(--j-blue)}.j-border--green{border-color:var(--j-green)}.j-border--gold{border-color:var(--j-gold)}.j-border--orange{border-color:var(--j-orange)}.j-border--purple{border-color:var(--j-purple)}.j-bg--red{background-color:var(--j-red)}.j-bg--blue{background-color:var(--j-blue)}.j-bg--green{background-color:var(--j-green)}.j-bg--gold{background-color:var(--j-gold)}.j-bg--orange{background-color:var(--j-orange)}.j-bg--purple{background-color:var(--j-purple)}.j-bg--dark-grey{background-color:var(--j-dark-grey)}.j-bg--darkest{background-color:var(--j-darkest)}.j-app{background:var(--j-darkest);width:375px;max-width:375px;height:667px;max-height:667px;font-family:var(--j-font);color:var(--j-white);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden;container:jimbo/inline-size}.j-app--fluid{width:100%;max-width:750px;height:auto;min-height:400px;max-height:none}.j-app__content{min-height:0;padding:var(--j-space-lg) var(--j-space-lg) var(--j-space-md);flex-direction:column;flex:1;display:flex;overflow:hidden}.j-app__scroll{min-height:0;padding:var(--j-space-lg) var(--j-space-lg) var(--j-space-md);scrollbar-width:none;-ms-overflow-style:none;flex:1;overflow:hidden auto}.j-app__scroll::-webkit-scrollbar{display:none}.j-app__footer{padding:var(--j-space-md) var(--j-space-lg) var(--j-space-md);border-top:2px solid var(--j-black);background:var(--j-dark-grey);gap:var(--j-space-sm);flex-direction:column;flex-shrink:0;display:flex}@container jimbo (width>=401px){.j-app__content,.j-app__scroll{padding:var(--j-space-xl) var(--j-space-xl) var(--j-space-lg)}.j-app__footer{padding:var(--j-space-md) var(--j-space-xl) var(--j-space-lg)}.j-stat-grid__value{font-size:20px}.j-info-card{padding:var(--j-space-md) var(--j-space-lg)}.j-info-card__title{font-size:14px}.j-section-header__tag{font-size:12px}}.j-section-header{align-items:center;gap:var(--j-space-md);margin-bottom:var(--j-space-md);display:flex}.j-section-header__tag{font-family:var(--j-font);letter-spacing:2px;color:var(--j-white);text-shadow:var(--j-text-shadow);border-radius:3px;flex-shrink:0;padding:2px 8px;font-size:11px}.j-section-header__rule{opacity:.33;border-radius:1px;flex:1;height:2px}.j-stat-grid{background:var(--j-dark-grey);border-radius:var(--j-radius-md);padding:var(--j-space-md);border:2px solid var(--j-panel-edge);box-shadow:0 2px 0 var(--j-black);gap:var(--j-space-md);text-align:center;grid-template-columns:1fr 1fr 1fr;display:grid}.j-stat-grid__value{font-family:var(--j-font);color:var(--j-gold-text);text-shadow:var(--j-text-shadow);font-size:16px}.j-stat-grid__label{font-family:var(--j-font);color:var(--j-grey);letter-spacing:2px;margin-top:2px;font-size:9px}.j-info-card{background:var(--j-dark-grey);border-radius:var(--j-radius-md);padding:var(--j-space-md);box-shadow:0 2px 0 var(--j-black);align-items:center;gap:var(--j-space-md);cursor:pointer;border:2px solid #0000;display:flex}.j-info-card:hover{filter:brightness(1.08)}.j-info-card__body{flex:1;min-width:0}.j-info-card__title{font-family:var(--j-font);color:var(--j-white);letter-spacing:1px;text-shadow:var(--j-text-shadow);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.j-info-card__sub{font-family:var(--j-font);color:var(--j-gold-text);letter-spacing:1px;margin-top:2px;font-size:9px}.j-info-card__aside{text-align:right;flex-shrink:0}.j-inset{background:var(--j-dark-grey);border-radius:var(--j-radius-md);padding:var(--j-space-md) var(--j-space-md);border:2px solid var(--j-panel-edge);box-shadow:0 2px 0 var(--j-black);font-family:var(--j-font);color:var(--j-grey);letter-spacing:1px;font-size:11px;line-height:1.7}.j-wordmark{text-align:center;margin-bottom:var(--j-space-xl)}.j-wordmark__title{font-family:var(--j-font);letter-spacing:3px;color:var(--j-gold-text);text-shadow:2px 2px #000c;font-size:32px;line-height:1}.j-wordmark__sub{font-family:var(--j-font);letter-spacing:4px;color:var(--j-grey);text-shadow:var(--j-text-shadow);margin-top:4px;font-size:14px}.j-seed-input{gap:var(--j-space-sm);flex-direction:column;display:flex}.j-seed-input__field{border-radius:var(--j-radius-md);border:2px solid var(--j-panel-edge);background:var(--j-darkest);width:100%;color:var(--j-gold-text);font-size:18px;font-family:var(--j-font);letter-spacing:.12em;text-transform:uppercase;text-shadow:var(--j-text-shadow);box-sizing:border-box;outline:none;padding:8px 12px;font-weight:400;transition:border-color .1s}.j-seed-input__field::placeholder{color:var(--j-grey);opacity:.6;text-transform:uppercase;letter-spacing:.06em;font-size:12px}.j-seed-input__field:focus{border-color:var(--j-gold)}.j-seed-input__field[data-valid=true]{border-color:var(--j-green)}.j-seed-input__field[data-valid=false]{border-color:var(--j-red)}.j-seed-input__field[data-valid=partial]{border-color:var(--j-panel-edge)}.j-seed-input__hint{font-family:var(--j-font);letter-spacing:.08em;color:var(--j-grey);text-shadow:var(--j-text-shadow);font-size:9px}.j-aesthetic-selector{gap:var(--j-space-sm);flex-direction:column;display:flex}.j-aesthetic-selector__list{gap:var(--j-space-sm);flex-wrap:wrap;display:flex}.j-aesthetic-pill{border-radius:var(--j-radius-md);border:2px solid var(--j-panel-edge);background:var(--j-darkest);color:var(--j-grey);cursor:pointer;font-size:11px;font-family:var(--j-font);letter-spacing:.04em;text-shadow:var(--j-text-shadow);padding:4px 10px;font-weight:400;transition:border-color .1s,background .1s,color .1s;box-shadow:0 2px #0000004d}.j-aesthetic-pill:hover{border-color:var(--j-gold);color:var(--j-gold-text)}.j-aesthetic-pill[data-active=true]{border-color:var(--j-gold);color:var(--j-gold-text);box-shadow:0 0 0 1px var(--j-gold), 0 2px 0 0 #0000004d;background:#e4b64321}.j-showcase{background:var(--j-darkest);width:100%;height:100%;font-family:var(--j-font);color:var(--j-white);flex-direction:column;display:flex;overflow:hidden}.j-showcase__scroll{flex:1;min-height:0;padding:18px 14px 10px;overflow-y:auto}.j-showcase__wordmark{text-align:center;margin-bottom:18px}.j-showcase__wordmark-title{letter-spacing:3px;color:var(--j-gold-text);text-shadow:2px 2px #000c;font-size:32px;line-height:1}.j-showcase__wordmark-sub{letter-spacing:4px;color:var(--j-grey);text-shadow:var(--j-text-shadow);margin-top:4px;font-size:14px}.j-showcase__stats{background:var(--j-dark-grey);border-radius:var(--j-radius-md);border:2px solid var(--j-panel-edge);box-shadow:0 2px 0 var(--j-black);gap:var(--j-space-md);text-align:center;margin-bottom:var(--j-space-xl);grid-template-columns:1fr 1fr 1fr;padding:10px;display:grid}.j-showcase__stat-value{color:var(--j-gold-text);text-shadow:var(--j-text-shadow);font-size:16px}.j-showcase__stat-label{color:var(--j-grey);letter-spacing:2px;margin-top:2px;font-size:9px}.j-showcase__section-header{align-items:center;gap:var(--j-space-md);margin-bottom:var(--j-space-md);display:flex}.j-showcase__section-tag{letter-spacing:2px;color:var(--j-white);text-shadow:var(--j-text-shadow);border-radius:3px;padding:2px 8px;font-size:11px}.j-showcase__section-rule{border-radius:1px;flex:1;height:2px}.j-showcase__filter-list{gap:var(--j-space-md);margin-bottom:var(--j-space-xl);flex-direction:column;display:flex}.j-showcase__filter-card{background:var(--j-dark-grey);border-radius:var(--j-radius-md);box-shadow:0 2px 0 var(--j-black);cursor:pointer;align-items:center;gap:10px;padding:10px;display:flex}.j-showcase__filter-sprites{gap:2px;display:flex}.j-showcase__filter-sprite{justify-content:center;align-items:center;width:30px;height:40px;display:flex}.j-showcase__filter-info{flex:1;min-width:0}.j-showcase__filter-name{color:var(--j-white);letter-spacing:1px;text-shadow:var(--j-text-shadow);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.j-showcase__filter-author{color:var(--j-gold-text);letter-spacing:1px;margin-top:2px;font-size:9px}.j-showcase__filter-hits{text-align:right}.j-showcase__filter-hits-value{text-shadow:var(--j-text-shadow);font-size:14px}.j-showcase__filter-hits-label{color:var(--j-grey);letter-spacing:1px;font-size:8px}.j-showcase__recent{background:var(--j-dark-grey);border-radius:var(--j-radius-md);border:2px solid var(--j-panel-edge);box-shadow:0 2px 0 var(--j-black);color:var(--j-grey);letter-spacing:1px;padding:8px 10px;font-size:11px;line-height:1.7}.j-showcase__actions{border-top:2px solid var(--j-black);background:var(--j-dark-grey);flex-direction:column;gap:6px;padding:8px 10px 10px;display:flex}.j-footer__suits{align-items:center;display:inline-flex}.j-footer__suit-stage{vertical-align:middle;width:1.5em;height:1em;display:inline-block;position:relative}.j-footer__suit-char{opacity:0;justify-content:center;align-items:center;animation-duration:5s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-delay:0s;display:inline-flex;position:absolute;inset:0}.j-copy-row__label{letter-spacing:2px}.j-motely-badge{align-items:center;gap:6px;display:inline-flex}.j-motely-badge--chip{border-radius:var(--j-radius-sm);background:var(--j-darkest);border:1px solid var(--j-panel-edge);padding:3px 8px}.j-text--dance-container{display:inline-flex}.j-font-dance-char{animation:3s ease-in-out infinite j-font-dance;display:inline-block}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}.j-juice-hover{transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.j-juice-hover:hover{z-index:5;transform:scale(1.05)translateY(-2px)}
2
+ /*$vite$:1*/