@nice2dev/icons 1.3.8 → 1.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +99 -0
- package/dist/cjs/NiceIconPicker.js +310 -92
- package/dist/cjs/NiceIconStacker.js +137 -120
- package/dist/cjs/NiceIconValue.js +44 -0
- package/dist/cjs/client.js +11 -0
- package/dist/cjs/iconHtml.js +104 -0
- package/dist/cjs/iconStack.js +74 -1
- package/dist/cjs/iconValue.js +473 -0
- package/dist/cjs/icons/actions.js +39 -8
- package/dist/cjs/icons/files.js +23 -2
- package/dist/cjs/icons/fintech.js +12 -5
- package/dist/cjs/icons/index.js +1 -0
- package/dist/cjs/icons/media.js +7 -4
- package/dist/cjs/icons/realestate.js +8 -7
- package/dist/cjs/icons/shapes.js +55 -4
- package/dist/cjs/index.js +12 -0
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/NiceIconPicker.js +313 -95
- package/dist/esm/NiceIconStacker.js +140 -123
- package/dist/esm/NiceIconValue.js +41 -0
- package/dist/esm/client.js +4 -1
- package/dist/esm/iconHtml.js +100 -0
- package/dist/esm/iconStack.js +72 -2
- package/dist/esm/iconValue.js +470 -0
- package/dist/esm/icons/actions.js +39 -9
- package/dist/esm/icons/files.js +23 -2
- package/dist/esm/icons/fintech.js +12 -5
- package/dist/esm/icons/index.js +1 -1
- package/dist/esm/icons/media.js +8 -5
- package/dist/esm/icons/realestate.js +8 -7
- package/dist/esm/icons/shapes.js +55 -4
- package/dist/esm/index.js +5 -2
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/NiceIconPicker.d.ts +72 -20
- package/dist/types/NiceIconStacker.d.ts +30 -9
- package/dist/types/NiceIconValue.d.ts +40 -0
- package/dist/types/client.d.ts +8 -2
- package/dist/types/iconHtml.d.ts +22 -0
- package/dist/types/iconStack.d.ts +18 -0
- package/dist/types/iconValue.d.ts +22 -0
- package/dist/types/icons/actions.d.ts +1 -0
- package/dist/types/icons/index.d.ts +1 -1
- package/dist/types/index.d.ts +8 -2
- package/package.json +2 -2
package/dist/esm/icons/media.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx,
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
3
|
import { within, swapDuotone } from '../iconParts.js';
|
|
4
4
|
|
|
@@ -263,13 +263,16 @@ const NtdWifi = /* @__PURE__ */ createIcon({
|
|
|
263
263
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
264
264
|
},
|
|
265
265
|
});
|
|
266
|
+
// NtdBluetooth, round 40: the rune 1.5 × the stroke width in every variant but `outline` (vivid had
|
|
267
|
+
// a fixed 2.2), scaled to 10/11 about the centre so the heavier tips stay in the box in `sharp`.
|
|
268
|
+
const BLUETOOTH = 'M7 7l10 10-5 5V2l5 5-10 10';
|
|
266
269
|
const NtdBluetooth = /* @__PURE__ */ createIcon({
|
|
267
270
|
displayName: 'NtdBluetooth',
|
|
268
271
|
paths: {
|
|
269
|
-
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d:
|
|
270
|
-
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d:
|
|
271
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12
|
|
272
|
-
vivid: ({ primaryColor,
|
|
272
|
+
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: BLUETOOTH, stroke: primaryColor, strokeWidth: strokeWidth * 1.5, fill: "none" })),
|
|
273
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: BLUETOOTH, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
274
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l5 5-5 5 5 5-5 5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BLUETOOTH, stroke: primaryColor, strokeWidth: strokeWidth * 1.5, fill: "none" })] })),
|
|
275
|
+
vivid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: BLUETOOTH, stroke: primaryColor, strokeWidth: strokeWidth * 1.5, fill: "none" })),
|
|
273
276
|
},
|
|
274
277
|
});
|
|
275
278
|
// ── Relocated from brand packs ──
|
|
@@ -17,15 +17,16 @@ const NtdHouse = /* @__PURE__ */ createIcon({
|
|
|
17
17
|
// NtdApartment: filled, the windows and the door are drawn as in the outline — frames — in the
|
|
18
18
|
// accent colour (they were 50% white patches), the door kept inside the building. Duotone is fills
|
|
19
19
|
// only: the building primary, the windows and the door secondary; vivid puts the door in the
|
|
20
|
-
// accent colour.
|
|
21
|
-
|
|
20
|
+
// accent colour. Round 40: the building 15 wide (was 16) and the door 3.5 (was 4), the windows
|
|
21
|
+
// moved in to keep their margins.
|
|
22
|
+
const APARTMENT = { x: 4.5, y: 4, width: 15, height: 18, rx: 2 };
|
|
22
23
|
const APARTMENT_WINDOWS = [
|
|
23
|
-
{ x: 7, y: 7 },
|
|
24
|
-
{ x:
|
|
25
|
-
{ x: 7, y: 13 },
|
|
26
|
-
{ x:
|
|
24
|
+
{ x: 7.25, y: 7 },
|
|
25
|
+
{ x: 13.75, y: 7 },
|
|
26
|
+
{ x: 7.25, y: 13 },
|
|
27
|
+
{ x: 13.75, y: 13 },
|
|
27
28
|
];
|
|
28
|
-
const APARTMENT_DOOR = { x: 10, y: 18, width:
|
|
29
|
+
const APARTMENT_DOOR = { x: 10.25, y: 18, width: 3.5, height: 4 };
|
|
29
30
|
/** The door of the solid variants: it stops short of the ground, leaving a thin primary sill. */
|
|
30
31
|
const APARTMENT_DOOR_SILL = { ...APARTMENT_DOOR, height: 3.25 };
|
|
31
32
|
const NtdApartment = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/shapes.js
CHANGED
|
@@ -255,13 +255,64 @@ const NtdRepeat = /* @__PURE__ */ createIcon({
|
|
|
255
255
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => repeatArrows(primaryColor, secondaryColor, strokeWidth),
|
|
256
256
|
},
|
|
257
257
|
});
|
|
258
|
+
// NtdShuffle, round 40: two S-curves (they were straight diagonals), a line glyph twice the stroke
|
|
259
|
+
// width in every variant but `outline`, with NtdRepeat's heads and shafts stopping short of the
|
|
260
|
+
// points. The arrow running down breaks where it passes under the other, its ends half a line width
|
|
261
|
+
// clear of it even with the square caps of `sharp` — worked out from the width, so the gap holds at
|
|
262
|
+
// any weight. Duotone and vivid: the arrow on top primary, the one under it secondary.
|
|
263
|
+
const SHUFFLE_HEADS = ['M18 3l3 3-3 3', 'M18 15l3 3-3 3'];
|
|
264
|
+
/** The curve of the arrow running down; the one on top is its mirror image. */
|
|
265
|
+
const SHUFFLE_UNDER = [
|
|
266
|
+
[5, 6],
|
|
267
|
+
[11, 6],
|
|
268
|
+
[11, 18],
|
|
269
|
+
[17, 18],
|
|
270
|
+
];
|
|
271
|
+
/** Where the curves cross — also the centre the under curve is symmetric about. */
|
|
272
|
+
const SHUFFLE_CROSS = [11, 12];
|
|
273
|
+
const shufflePoint = (p) => `${+p[0].toFixed(2)} ${+p[1].toFixed(2)}`;
|
|
274
|
+
function shuffleArrows(over, under, width) {
|
|
275
|
+
const back = 21 - width * 0.35;
|
|
276
|
+
const [p0, p1, p2, p3] = SHUFFLE_UNDER;
|
|
277
|
+
const lerp = (a, b, t) => a.map((v, i) => v + (b[i] - v) * t);
|
|
278
|
+
/** de Casteljau: the controls and the end of the curve's part up to `t`. */
|
|
279
|
+
const at = (t) => {
|
|
280
|
+
const a = lerp(p0, p1, t);
|
|
281
|
+
const b = lerp(p1, p2, t);
|
|
282
|
+
const d = lerp(a, b, t);
|
|
283
|
+
return [a, d, lerp(d, lerp(b, lerp(p2, p3, t), t), t)];
|
|
284
|
+
};
|
|
285
|
+
// How far from the crossing a square-capped end stops. The curves cross at 53° (sin 0.8,
|
|
286
|
+
// cos 0.6); the cap's corner must stay half the other line plus a gap away — half a width, at
|
|
287
|
+
// most 1, or heavy lines would cut the whole curve — plus the half width the cap reaches past the
|
|
288
|
+
// end.
|
|
289
|
+
const gap = Math.min(width * 0.5, 1);
|
|
290
|
+
const clear = (width * 0.5 + gap + width * 0.5 * 0.6) / 0.8 + width * 0.5;
|
|
291
|
+
let lo = 0;
|
|
292
|
+
let hi = 0.5;
|
|
293
|
+
for (let i = 0; i < 24; i += 1) {
|
|
294
|
+
const mid = (lo + hi) / 2;
|
|
295
|
+
const end = at(mid)[2];
|
|
296
|
+
if (Math.hypot(end[0] - SHUFFLE_CROSS[0], end[1] - SHUFFLE_CROSS[1]) > clear) {
|
|
297
|
+
lo = mid;
|
|
298
|
+
}
|
|
299
|
+
else {
|
|
300
|
+
hi = mid;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
const [c1, c2, end] = at(lo);
|
|
304
|
+
const turn = (p) => p.map((v, i) => 2 * SHUFFLE_CROSS[i] - v);
|
|
305
|
+
const underPath = `M3 6H5C${shufflePoint(c1)} ${shufflePoint(c2)} ${shufflePoint(end)}` +
|
|
306
|
+
`M${shufflePoint(turn(end))}C${shufflePoint(turn(c2))} ${shufflePoint(turn(c1))} 17 18H${back}`;
|
|
307
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: `${SHUFFLE_HEADS[1]}${underPath}`, stroke: under, strokeWidth: width, fill: "none" }), jsx("path", { d: `${SHUFFLE_HEADS[0]}M3 18H5C11 18 11 6 17 6H${back}`, stroke: over, strokeWidth: width, fill: "none" })] }));
|
|
308
|
+
}
|
|
258
309
|
const NtdShuffle = /* @__PURE__ */ createIcon({
|
|
259
310
|
displayName: 'NtdShuffle',
|
|
260
311
|
paths: {
|
|
261
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
262
|
-
outline: ({ primaryColor, strokeWidth }) => (
|
|
263
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
264
|
-
vivid: ({ primaryColor, secondaryColor
|
|
312
|
+
solid: ({ primaryColor, strokeWidth }) => shuffleArrows(primaryColor, primaryColor, strokeWidth * 2),
|
|
313
|
+
outline: ({ primaryColor, strokeWidth }) => shuffleArrows(primaryColor, primaryColor, strokeWidth),
|
|
314
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => shuffleArrows(primaryColor, secondaryColor, strokeWidth * 2),
|
|
315
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => shuffleArrows(primaryColor, secondaryColor, strokeWidth * 2),
|
|
265
316
|
},
|
|
266
317
|
});
|
|
267
318
|
// Geometry construction tools (1.2.2: NiceGeometry drew these as the glyphs • — ⊥ ∥ ⊙ ∠).
|
package/dist/esm/index.js
CHANGED
|
@@ -2,12 +2,15 @@ export { GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SEMANTIC_COLOR_VARS, SIZE_MA
|
|
|
2
2
|
export { createIcon } from './createIcon.js';
|
|
3
3
|
export { SmilAnimationWrapper as NiceSmilAnimationWrapper, SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported } from './smilAnimations.js';
|
|
4
4
|
export { NiceIconPicker } from './NiceIconPicker.js';
|
|
5
|
+
export { NiceIconHtml, NiceIconValue } from './NiceIconValue.js';
|
|
6
|
+
export { formatIconValue, parseIconValue } from './iconValue.js';
|
|
7
|
+
export { parseIconHtml } from './iconHtml.js';
|
|
5
8
|
export { NiceIconStacker } from './NiceIconStacker.js';
|
|
6
|
-
export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack } from './iconStack.js';
|
|
9
|
+
export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack } from './iconStack.js';
|
|
7
10
|
export { AnimationController, InteractiveIcon, AnimationController as NiceAnimationController, InteractiveIcon as NiceInteractiveIcon, PRESET_INTERACTIONS, PRESET_SEQUENCES, createAnimationSequence, createClickAnimation, createHoverAnimation, createVisibilityAnimation, useAnimationSequence } from './animationControls.js';
|
|
8
11
|
export { batchExportIcons, copyIconToClipboard, downloadIconAsPng, downloadIconAsSvg, exportIconToDataUrl, exportIconToFigmaNode, exportIconToSvgString, generateFigmaPluginManifest } from './figmaExport.js';
|
|
9
12
|
export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh } from './icons/navigation.js';
|
|
10
|
-
export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut } from './icons/actions.js';
|
|
13
|
+
export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdFrameCorners, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut } from './icons/actions.js';
|
|
11
14
|
export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdHourglass, NtdInfo, NtdMap, NtdMapPin, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './icons/ui.js';
|
|
12
15
|
export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons } from './icons/sustainability.js';
|
|
13
16
|
export { NtdAccessibility, NtdAssistiveTech, NtdAudioDescription, NtdBlind, NtdBraille, NtdClosedCaptions, NtdDeaf, NtdDyslexia, NtdEasyRead, NtdHearingAid, NtdScreenReader, NtdSignLanguage, NtdWheelchair, accessibilityIcons } from './icons/accessibility.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nice-desktop-icon-exporter{color:var(--nice-text-primary,inherit);display:grid;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-4,16px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-width:0}.nice-desktop-icon-exporter :where(h3,h4){font-weight:var(--nice-font-weight-semibold,600);margin:0 0 var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(h3){font-size:var(--nice-font-size-md,.875rem)}.nice-desktop-icon-exporter :where(h4){color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-desktop-icon-exporter :where(button){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-desktop-icon-exporter :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-desktop-icon-exporter :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-desktop-icon-exporter :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-desktop-icon-exporter :where(button,input):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-desktop-icon-exporter__config,.nice-desktop-icon-exporter__preview,.nice-desktop-icon-exporter__results{background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);min-width:0;padding:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-item{align-items:center;color:var(--nice-text-muted,#94a3b8);display:flex;flex-direction:column;font-size:var(--nice-font-size-xs,.75rem);font-variant-numeric:tabular-nums;gap:var(--nice-space-1,4px)}.nice-desktop-icon-exporter__preview-box{align-items:center;border-radius:var(--nice-radius-sm,4px);display:flex;justify-content:center}.nice-desktop-icon-exporter__config{display:flex;flex-direction:column;gap:var(--nice-space-2-5,10px)}.nice-desktop-icon-exporter__config>label{align-items:center;color:var(--nice-text-secondary,#64748b);display:flex;flex-wrap:wrap;font-weight:var(--nice-font-weight-medium,500);gap:var(--nice-space-2,8px)}.nice-desktop-icon-exporter__config>label>input[type=range],.nice-desktop-icon-exporter__config>label>input[type=text]{flex:1 1 140px;min-width:0}.nice-desktop-icon-exporter__platforms,.nice-desktop-icon-exporter__sizes{display:flex;flex-wrap:wrap;gap:var(--nice-space-1-5,6px) var(--nice-space-4,16px)}.nice-desktop-icon-exporter__sizes>h4{flex-basis:100%;margin:0}.nice-desktop-icon-exporter__platforms label,.nice-desktop-icon-exporter__sizes label{align-items:center;cursor:pointer;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-desktop-icon-exporter__actions{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-desktop-icon-exporter__actions>button:first-child{background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff);font-weight:var(--nice-font-weight-medium,500)}.nice-desktop-icon-exporter__results{grid-column:1/-1}.nice-desktop-icon-exporter__results-grid{display:grid;gap:var(--nice-space-2,8px);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.nice-desktop-icon-exporter__result-item{align-items:center;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:flex;flex-direction:column;gap:var(--nice-space-1,4px);padding:var(--nice-space-2,8px);text-align:center}.nice-desktop-icon-exporter__result-item>img{max-height:64px;max-width:64px}.nice-desktop-icon-exporter__result-item>span{color:var(--nice-text-secondary,#64748b);font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xxs,.625rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-turn{animation:ntd-turn var(--ntd-anim-duration,4s) infinite}@keyframes ntd-turn{0%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(0deg)}12.5%,50%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(180deg)}62.5%,to{transform:rotate(0deg)}}.ntd-anim-turn .ntd-hourglass-sand{animation-duration:var(--ntd-anim-duration,4s);animation-iteration-count:infinite;animation-timing-function:linear;transform-box:view-box}.ntd-anim-turn .ntd-hourglass-sand--top-neck{animation-name:ntd-hourglass-top-neck;transform-origin:12px 11.4px}.ntd-anim-turn .ntd-hourglass-sand--top-base{animation-name:ntd-hourglass-top-base;transform-origin:12px 5.8px}.ntd-anim-turn .ntd-hourglass-sand--bottom-neck{animation-name:ntd-hourglass-bottom-neck;transform-origin:12px 12.6px}.ntd-anim-turn .ntd-hourglass-sand--bottom-base{animation-name:ntd-hourglass-bottom-base;transform-origin:12px 18.2px}.ntd-anim-turn .ntd-hourglass-sand--stream-up{animation-name:ntd-hourglass-stream-up}.ntd-anim-turn .ntd-hourglass-sand--stream-down{animation-name:ntd-hourglass-stream-down}@keyframes ntd-hourglass-top-base{0%,12.5%{transform:scaleY(0)}50%,62.5%{transform:scaleY(1)}62.6%,to{transform:scaleY(0)}}@keyframes ntd-hourglass-top-neck{0%,50%{transform:scale(0)}50.1%,62.5%{transform:scale(1)}to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-neck{0%,12.5%{transform:scale(1)}50%,to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-base{0%,62.5%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes ntd-hourglass-stream-up{0%,13%,49.5%,to{opacity:0}14%,48.5%{opacity:1}}@keyframes ntd-hourglass-stream-down{0%,63%,99.5%,to{opacity:0}64%,98.5%{opacity:1}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.ntd-picker--open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.ntd-picker-tab--active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.ntd-picker-cell--selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.ntd-picker-cell--draggable{cursor:grab}.ntd-picker-cell.ntd-picker-cell--draggable:active{cursor:grabbing}.ntd-picker-cell.ntd-picker-cell--draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.ntd-picker-cell--multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-fav.ntd-picker-cell-fav--active,.ntd-picker-cell:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.ntd-picker-cell-fav--active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.ntd-picker-tab--active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.ntd-picker--disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.ntd-picker--multi .ntd-picker-trigger{border-style:dashed}.nice-icon-stacker{color:var(--nice-text-primary,inherit);display:flex;flex-direction:column;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-3,12px);min-width:0}.nice-icon-stacker :where(button){align-items:center;background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;display:inline-flex;font:inherit;gap:var(--nice-space-1-5,6px);padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-icon-stacker :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-icon-stacker :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-icon-stacker :where(input[type=text],select){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1,4px) var(--nice-space-2,8px)}.nice-icon-stacker :where(input[type=text]){width:4.5em}.nice-icon-stacker :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-icon-stacker :where(button,input,select):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-icon-stacker__toolbar{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px)}.nice-icon-stacker__empty{color:var(--nice-text-secondary,#64748b);margin:0}.nice-icon-stacker__body{display:grid;gap:var(--nice-space-3,12px);grid-template-columns:minmax(180px,auto) minmax(0,1fr)}.nice-icon-stacker__preview{align-items:flex-end;background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);display:flex;gap:var(--nice-space-3,12px);padding:var(--nice-space-3,12px)}.nice-icon-stacker__preview-cell{align-items:center;display:flex;flex-direction:column;gap:var(--nice-space-1,4px)}.nice-icon-stacker__preview-cell small{color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-icon-stacker__layers{list-style:none;margin:0;padding:0}.nice-icon-stacker__layer,.nice-icon-stacker__layers{display:flex;flex-direction:column;gap:var(--nice-space-1-5,6px)}.nice-icon-stacker__layer{--nice-icon-stacker-depth:0;background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);margin-left:calc(var(--nice-icon-stacker-depth, 0)*var(--nice-space-5, 20px));padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-icon-stacker__layer-row,.nice-icon-stacker__text{align-items:center;display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px)}.nice-icon-stacker__text{margin-left:var(--nice-space-5,20px)}.nice-icon-stacker__text :where(input[aria-invalid=true]){border-color:var(--nice-color-error,#ef4444)}.nice-icon-stacker__more>summary{color:var(--nice-text-secondary,#64748b);cursor:pointer;width:max-content}.nice-icon-stacker__more-body{align-items:center;display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px) var(--nice-space-4,16px);padding-top:var(--nice-space-1-5,6px)}.nice-icon-stacker__color{align-items:center;display:inline-flex;gap:var(--nice-space-1,4px)}.nice-icon-stacker :where(input[type=color]){background:none;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-sm,4px);cursor:pointer;height:1.5rem;padding:0;width:2rem}.nice-icon-stacker__auto{color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-icon-stacker :where(.nice-icon-stacker__reset){background:none;border:none;padding:var(--nice-space-0-5,2px)}.nice-icon-stacker :where(input[type=radio]){accent-color:var(--nice-color-primary,#3b82f6);margin:0}.nice-icon-stacker__layer-icon{display:inline-flex}.nice-icon-stacker__layer-name{align-items:center;display:inline-flex;font-weight:var(--nice-font-weight-semibold,600);gap:var(--nice-space-1-5,6px);min-width:8em}.nice-icon-stacker__badge{background:var(--nice-color-primary,#3b82f6);border-radius:var(--nice-radius-full,9999px);color:var(--nice-text-on-primary,#fff);font-size:var(--nice-font-size-xs,.75rem);font-weight:var(--nice-font-weight-medium,500);padding:0 var(--nice-space-1-5,6px)}.nice-icon-stacker__field{align-items:center;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-icon-stacker__field>span{color:var(--nice-text-secondary,#64748b)}.nice-icon-stacker__field output{font-variant-numeric:tabular-nums;min-width:3ch}.nice-icon-stacker__remove{margin-left:auto}.nice-icon-stacker__code{align-items:flex-start;display:flex;flex-direction:column;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-icon-stacker__code pre{background:var(--nice-bg-secondary,#f8fafc);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xs,.75rem);margin:0;overflow-x:auto;padding:var(--nice-space-3,12px);width:100%}@media (max-width:640px){.nice-icon-stacker__body{grid-template-columns:minmax(0,1fr)}}
|
|
1
|
+
.ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-turn{animation:ntd-turn var(--ntd-anim-duration,4s) infinite}@keyframes ntd-turn{0%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(0deg)}12.5%,50%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(180deg)}62.5%,to{transform:rotate(0deg)}}.ntd-anim-turn .ntd-hourglass-sand{animation-duration:var(--ntd-anim-duration,4s);animation-iteration-count:infinite;animation-timing-function:linear;transform-box:view-box}.ntd-anim-turn .ntd-hourglass-sand--top-neck{animation-name:ntd-hourglass-top-neck;transform-origin:12px 11.4px}.ntd-anim-turn .ntd-hourglass-sand--top-base{animation-name:ntd-hourglass-top-base;transform-origin:12px 5.8px}.ntd-anim-turn .ntd-hourglass-sand--bottom-neck{animation-name:ntd-hourglass-bottom-neck;transform-origin:12px 12.6px}.ntd-anim-turn .ntd-hourglass-sand--bottom-base{animation-name:ntd-hourglass-bottom-base;transform-origin:12px 18.2px}.ntd-anim-turn .ntd-hourglass-sand--stream-up{animation-name:ntd-hourglass-stream-up}.ntd-anim-turn .ntd-hourglass-sand--stream-down{animation-name:ntd-hourglass-stream-down}@keyframes ntd-hourglass-top-base{0%,12.5%{transform:scaleY(0)}50%,62.5%{transform:scaleY(1)}62.6%,to{transform:scaleY(0)}}@keyframes ntd-hourglass-top-neck{0%,50%{transform:scale(0)}50.1%,62.5%{transform:scale(1)}to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-neck{0%,12.5%{transform:scale(1)}50%,to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-base{0%,62.5%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes ntd-hourglass-stream-up{0%,13%,49.5%,to{opacity:0}14%,48.5%{opacity:1}}@keyframes ntd-hourglass-stream-down{0%,63%,99.5%,to{opacity:0}64%,98.5%{opacity:1}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}.nice-icon-stacker{color:var(--nice-text-primary,inherit);display:flex;flex-direction:column;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-3,12px);min-width:0}.nice-icon-stacker :where(button){align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--nice-radius-md,6px);color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:var(--nice-space-1-5,6px);padding:var(--nice-space-1,4px) var(--nice-space-2,8px)}.nice-icon-stacker :where(button:hover:not(:disabled)){background:var(--nice-bg-hover,var(--nice-bg-secondary,#f1f5f9))}.nice-icon-stacker :where(button:disabled){cursor:not-allowed;opacity:.45}.nice-icon-stacker :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1,4px) var(--nice-space-2,8px);width:5em}.nice-icon-stacker :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6);flex:1 1 auto;min-width:0}.nice-icon-stacker :where(button,input,summary):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-icon-stacker__bar{align-items:center;display:flex;gap:var(--nice-space-1,4px)}.nice-icon-stacker__title{color:var(--nice-text-secondary,#64748b);flex:1 1 auto;font-size:var(--nice-font-size-xs,.75rem);font-weight:var(--nice-font-weight-semibold,600);letter-spacing:.04em;text-transform:uppercase}.nice-icon-stacker :where(.nice-icon-stacker__add){border-color:var(--nice-border-color,#e2e8f0);font-weight:var(--nice-font-weight-medium,500)}.nice-icon-stacker :where(.nice-icon-stacker__add:hover:not(:disabled)){border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-color-primary,#3b82f6)}.nice-icon-stacker__empty{border:1px dashed var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);color:var(--nice-text-secondary,#64748b);margin:0;padding:var(--nice-space-4,16px);text-align:center}.nice-icon-stacker__top{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-icon-stacker__preview{align-items:center;background:var(--nice-bg-secondary,#f8fafc);border-radius:var(--nice-radius-lg,8px);display:flex;flex:0 0 auto;flex-direction:column;gap:var(--nice-space-2,8px);padding:var(--nice-space-3,12px)}.nice-icon-stacker__preview-main{display:inline-flex}.nice-icon-stacker__preview-small{align-items:flex-end;display:flex;gap:var(--nice-space-2,8px)}.nice-icon-stacker__preview-small>span{display:inline-flex}.nice-icon-stacker__layers-wrap{display:flex;flex:1 1 180px;flex-direction:column;gap:var(--nice-space-1,4px);min-width:0}.nice-icon-stacker__layers{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}.nice-icon-stacker__layer{--nice-icon-stacker-depth:0;align-items:center;border-radius:var(--nice-radius-md,6px);display:flex;padding-left:calc(var(--nice-icon-stacker-depth, 0)*var(--nice-space-4, 16px))}.nice-icon-stacker__layer:hover{background:var(--nice-bg-hover,var(--nice-bg-secondary,#f1f5f9))}.nice-icon-stacker__layer.nice-icon-stacker__layer--selected{background:color-mix(in srgb,var(--nice-color-primary,#3b82f6) 14%,transparent)}.nice-icon-stacker :where(.nice-icon-stacker__layer-select){flex:1 1 auto;min-width:0;padding:var(--nice-space-1,4px) var(--nice-space-1-5,6px);text-align:left}.nice-icon-stacker :where(.nice-icon-stacker__layer-select:hover:not(:disabled)){background:transparent}.nice-icon-stacker__layer-icon{display:inline-flex;flex:0 0 auto}.nice-icon-stacker__layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-icon-stacker__layer--selected .nice-icon-stacker__layer-name{font-weight:var(--nice-font-weight-semibold,600)}.nice-icon-stacker__layer-text{border-radius:var(--nice-radius-sm,4px);padding:0 var(--nice-space-1,4px)}.nice-icon-stacker__badge,.nice-icon-stacker__layer-text{background:var(--nice-bg-tertiary,#f1f5f9);font-size:var(--nice-font-size-xs,.75rem)}.nice-icon-stacker__badge{border-radius:var(--nice-radius-full,9999px);color:var(--nice-text-secondary,#64748b);margin-left:auto;padding:0 var(--nice-space-1-5,6px)}.nice-icon-stacker :where(.nice-icon-stacker__remove){color:var(--nice-text-secondary,#64748b);flex:0 0 auto;opacity:0;padding:var(--nice-space-1,4px)}.nice-icon-stacker .nice-icon-stacker__remove:focus-visible,.nice-icon-stacker__layer--selected .nice-icon-stacker__remove,.nice-icon-stacker__layer:hover .nice-icon-stacker__remove{opacity:1}.nice-icon-stacker__hint{color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-icon-stacker__inspector{border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);display:flex;flex-direction:column;gap:var(--nice-space-2,8px);padding:var(--nice-space-2,8px) var(--nice-space-3,12px) var(--nice-space-3,12px)}.nice-icon-stacker__inspector-head{align-items:center;display:flex;font-weight:var(--nice-font-weight-semibold,600);gap:var(--nice-space-1-5,6px)}.nice-icon-stacker__inspector-head small{color:var(--nice-text-secondary,#64748b);font-weight:var(--nice-font-weight-normal,400)}.nice-icon-stacker__inspector-body{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-icon-stacker__pad{align-items:stretch;display:flex;flex:0 0 auto;flex-direction:column;gap:var(--nice-space-1-5,6px)}.nice-icon-stacker :where(.nice-icon-stacker__pad-auto){border-color:var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-full,9999px);font-size:var(--nice-font-size-xs,.75rem);justify-content:center;padding:2px var(--nice-space-2,8px)}.nice-icon-stacker :where(.nice-icon-stacker__pad-auto[aria-checked=true]){background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff)}.nice-icon-stacker__pad-box{background:var(--nice-bg-secondary,#f8fafc);border:1.5px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:grid;grid-template-columns:repeat(5,16px);grid-template-rows:repeat(5,16px);padding:var(--nice-space-1,4px);place-items:center}.nice-icon-stacker :where(.nice-icon-stacker__pad-dot){border:1.5px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:50%;height:10px;padding:0;width:10px}.nice-icon-stacker :where(.nice-icon-stacker__pad-dot:hover:not(:disabled)){background:var(--nice-primary-tint-20,transparent);border-color:var(--nice-color-primary,#3b82f6)}.nice-icon-stacker :where(.nice-icon-stacker__pad-dot[aria-checked=true]){background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);height:12px;width:12px}.nice-icon-stacker__fields{display:flex;flex:1 1 140px;flex-direction:column;gap:var(--nice-space-2,8px);min-width:0}.nice-icon-stacker__field{align-items:center;display:flex;gap:var(--nice-space-2,8px);min-width:0}.nice-icon-stacker__field>span{color:var(--nice-text-secondary,#64748b);flex:0 0 auto;min-width:4.5em}.nice-icon-stacker__field output{flex:0 0 auto;font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:right}.nice-icon-stacker__field :where(input[aria-invalid=true]){border-color:var(--nice-color-error,#ef4444)}.nice-icon-stacker__more>summary{border-radius:var(--nice-radius-sm,4px);color:var(--nice-text-secondary,#64748b);cursor:pointer;width:max-content}.nice-icon-stacker__more-body{display:flex;flex-direction:column;gap:var(--nice-space-2,8px);padding-top:var(--nice-space-2,8px)}.nice-icon-stacker__swatches{display:flex;flex-wrap:wrap;gap:var(--nice-space-1,4px) var(--nice-space-3,12px)}.nice-icon-stacker__swatch,.nice-icon-stacker__swatch-pick{align-items:center;display:inline-flex}.nice-icon-stacker__swatch-pick{cursor:pointer;gap:var(--nice-space-1-5,6px);position:relative}.nice-icon-stacker__swatch-pick input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}.nice-icon-stacker__swatch-pick:focus-within{border-radius:var(--nice-radius-sm,4px);box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6))}.nice-icon-stacker__swatch-dot{border:1px solid var(--nice-border-color,#e2e8f0);border-radius:50%;height:16px;width:16px}.nice-icon-stacker__swatch-pick--auto .nice-icon-stacker__swatch-dot{background:transparent;border:1.5px dashed color-mix(in srgb,currentColor 55%,transparent)}.nice-icon-stacker :where(.nice-icon-stacker__reset){color:var(--nice-text-secondary,#64748b);padding:2px}.nice-icon-stacker__code>summary{border-radius:var(--nice-radius-sm,4px);color:var(--nice-text-secondary,#64748b);cursor:pointer;width:max-content}.nice-icon-stacker__code pre{background:var(--nice-bg-secondary,#f8fafc);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xs,.75rem);margin:var(--nice-space-2,8px) 0;overflow-x:auto;padding:var(--nice-space-3,12px);width:100%}.nice-icon-stacker :where(.nice-icon-stacker__code button){border-color:var(--nice-border-color,#e2e8f0)}.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-text-secondary:var(--nice-text-secondary,#a0a0b4);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.ntd-picker--open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.ntd-picker-tab--active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.ntd-picker-cell--selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.ntd-picker-cell--draggable{cursor:grab}.ntd-picker-cell.ntd-picker-cell--draggable:active{cursor:grabbing}.ntd-picker-cell.ntd-picker-cell--draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.ntd-picker-cell--multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-wrap{position:relative}.ntd-picker-cell-fav.ntd-picker-cell-fav--active,.ntd-picker-cell-wrap:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.ntd-picker-cell-fav--active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.ntd-picker-tab--active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.ntd-picker--disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.ntd-picker--multi .ntd-picker-trigger{border-style:dashed}.ntd-picker.ntd-picker--icon-only .ntd-picker-trigger{min-width:0;padding:4px}.ntd-picker-views{background:var(--ntd-picker-input-bg,#14141c);border-radius:8px;display:flex;flex-shrink:0;gap:2px;margin:10px 12px 0;padding:3px}.ntd-picker-view{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-text-secondary,#a0a0b4);cursor:pointer;display:inline-flex;flex:1;font-family:inherit;font-size:.78rem;font-weight:500;gap:6px;justify-content:center;padding:5px 10px;transition:background .15s,color .15s}.ntd-picker-view:hover:not(:disabled){color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-view.ntd-picker-view--active{background:var(--ntd-picker-bg,#1e1e2a);box-shadow:0 0 0 1px var(--ntd-picker-border,#3a3a4a);color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-view:disabled{cursor:not-allowed;opacity:.45}.ntd-picker-back:focus-visible,.ntd-picker-view:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-banner{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);color:var(--ntd-picker-text,#f0f0f5);display:flex;flex-shrink:0;font-size:.8rem;gap:8px;padding:8px 12px}.ntd-picker-back{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:6px;color:inherit;cursor:pointer;display:inline-flex;flex-shrink:0;height:26px;justify-content:center;padding:0;width:26px}.ntd-picker-back:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-panel{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.ntd-picker-dropdown.ntd-picker-dropdown--stack{max-height:min(620px,85vh)}.ntd-picker-dropdown.ntd-picker-dropdown--up{bottom:calc(100% + 6px);top:auto}.ntd-picker-dropdown.ntd-picker-dropdown--end{left:auto;right:0}.ntd-picker-stack{--nice-border-color:var(--ntd-picker-border);--nice-bg-primary:var(--ntd-picker-input-bg);--nice-bg-secondary:var(--ntd-picker-input-bg);--nice-bg-tertiary:var(--ntd-picker-accent-alpha);--nice-bg-hover:var(--ntd-picker-accent-alpha);--nice-text-primary:var(--ntd-picker-text);--nice-text-secondary:var(--ntd-picker-text-secondary);--nice-color-primary:var(--ntd-picker-accent);flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;scrollbar-width:thin}.ntd-picker-serializer,.ntd-picker-stack[hidden]{display:none}.ntd-picker-grid.ntd-picker-grid--names{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.ntd-picker-grid--names .ntd-picker-cell{aspect-ratio:auto;gap:8px;justify-content:flex-start;padding:6px 8px}.ntd-picker-grid--names .ntd-picker-cell:hover{transform:none}.ntd-picker-grid--names .ntd-picker-cell:after{content:none}.ntd-picker-cell-name{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nice-desktop-icon-exporter{color:var(--nice-text-primary,inherit);display:grid;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-4,16px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-width:0}.nice-desktop-icon-exporter :where(h3,h4){font-weight:var(--nice-font-weight-semibold,600);margin:0 0 var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(h3){font-size:var(--nice-font-size-md,.875rem)}.nice-desktop-icon-exporter :where(h4){color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-desktop-icon-exporter :where(button){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-desktop-icon-exporter :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-desktop-icon-exporter :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-desktop-icon-exporter :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-desktop-icon-exporter :where(button,input):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-desktop-icon-exporter__config,.nice-desktop-icon-exporter__preview,.nice-desktop-icon-exporter__results{background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);min-width:0;padding:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-item{align-items:center;color:var(--nice-text-muted,#94a3b8);display:flex;flex-direction:column;font-size:var(--nice-font-size-xs,.75rem);font-variant-numeric:tabular-nums;gap:var(--nice-space-1,4px)}.nice-desktop-icon-exporter__preview-box{align-items:center;border-radius:var(--nice-radius-sm,4px);display:flex;justify-content:center}.nice-desktop-icon-exporter__config{display:flex;flex-direction:column;gap:var(--nice-space-2-5,10px)}.nice-desktop-icon-exporter__config>label{align-items:center;color:var(--nice-text-secondary,#64748b);display:flex;flex-wrap:wrap;font-weight:var(--nice-font-weight-medium,500);gap:var(--nice-space-2,8px)}.nice-desktop-icon-exporter__config>label>input[type=range],.nice-desktop-icon-exporter__config>label>input[type=text]{flex:1 1 140px;min-width:0}.nice-desktop-icon-exporter__platforms,.nice-desktop-icon-exporter__sizes{display:flex;flex-wrap:wrap;gap:var(--nice-space-1-5,6px) var(--nice-space-4,16px)}.nice-desktop-icon-exporter__sizes>h4{flex-basis:100%;margin:0}.nice-desktop-icon-exporter__platforms label,.nice-desktop-icon-exporter__sizes label{align-items:center;cursor:pointer;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-desktop-icon-exporter__actions{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-desktop-icon-exporter__actions>button:first-child{background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff);font-weight:var(--nice-font-weight-medium,500)}.nice-desktop-icon-exporter__results{grid-column:1/-1}.nice-desktop-icon-exporter__results-grid{display:grid;gap:var(--nice-space-2,8px);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.nice-desktop-icon-exporter__result-item{align-items:center;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:flex;flex-direction:column;gap:var(--nice-space-1,4px);padding:var(--nice-space-2,8px);text-align:center}.nice-desktop-icon-exporter__result-item>img{max-height:64px;max-width:64px}.nice-desktop-icon-exporter__result-item>span{color:var(--nice-text-secondary,#64748b);font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xxs,.625rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
@@ -20,7 +20,17 @@ export interface IconPickerEntry {
|
|
|
20
20
|
Component: React.ForwardRefExoticComponent<NtdIconProps & React.RefAttributes<SVGSVGElement>>;
|
|
21
21
|
/** Category label for grouping (e.g. `'Navigation'`). */
|
|
22
22
|
category: string;
|
|
23
|
+
/** The name shown — e.g. a translated one (1.3.9). Default: `name` without `Ntd`. */
|
|
24
|
+
label?: string;
|
|
23
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* What the picker's value holds: `'name'` — the icon's export name, a stack as short code
|
|
28
|
+
* (`Folder(Star@tr)`, 1.3.10) — `'json'` — the same tree as JSON (1.3.10) — or `'html'` — the icon
|
|
29
|
+
* drawn as an `<svg>` to show anywhere (1.3.9). Every format carries a stack.
|
|
30
|
+
*/
|
|
31
|
+
export type NiceIconPickerValueFormat = 'name' | 'json' | 'html';
|
|
32
|
+
/** How the picker shows an icon (1.3.9): the icon alone, or the icon followed by its name. */
|
|
33
|
+
export type NiceIconPickerDisplayMode = 'icon' | 'icon-name';
|
|
24
34
|
/**
|
|
25
35
|
* Props for the {@link NiceIconPicker} component.
|
|
26
36
|
*
|
|
@@ -39,15 +49,56 @@ export interface IconPickerEntry {
|
|
|
39
49
|
export interface NiceIconPickerProps {
|
|
40
50
|
/** Full icon registry — array of { name, Component, category } */
|
|
41
51
|
icons: IconPickerEntry[];
|
|
42
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* The selected icon (controlled) — single selection mode: an export name, a stack's code, JSON or
|
|
54
|
+
* HTML; every format is read, whatever `valueFormat` writes. `null`: none.
|
|
55
|
+
*/
|
|
43
56
|
value?: string | null;
|
|
57
|
+
/** The icon selected at first (uncontrolled, 1.3.9) — the same forms as `value`. */
|
|
58
|
+
defaultValue?: string | null;
|
|
44
59
|
/** Currently selected icon names (controlled) — multi-select mode */
|
|
45
60
|
values?: string[];
|
|
46
|
-
/**
|
|
47
|
-
|
|
61
|
+
/** The icon names selected at first (uncontrolled, multi-select, 1.3.9). */
|
|
62
|
+
defaultValues?: string[];
|
|
63
|
+
/**
|
|
64
|
+
* Fired when the selection changes (single mode): the new value in `valueFormat` and the entry of
|
|
65
|
+
* the (base) icon; `null, null` when cleared.
|
|
66
|
+
*/
|
|
67
|
+
onChange?: (value: string | null, entry: IconPickerEntry | null) => void;
|
|
48
68
|
/** Callback when icons are selected (multi-select mode) */
|
|
49
69
|
onChangeMulti?: (names: string[], entries: IconPickerEntry[]) => void;
|
|
50
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* What the value holds — the shortest by default:
|
|
72
|
+
* - `'name'` (default): a plain icon's export name (`'NtdFolder'`), a stack as short code
|
|
73
|
+
* (`'Folder(Star@tr)'`, 1.3.10) — see `formatIconValue`;
|
|
74
|
+
* - `'json'` (1.3.10): the same tree as JSON (`'["Folder",["Star",{"a":"tr"}]]'`);
|
|
75
|
+
* - `'html'` (1.3.9): the icon drawn as an `<svg>` (1em, `currentColor`) to show without React,
|
|
76
|
+
* its source in `data-ntd-*` attributes.
|
|
77
|
+
*
|
|
78
|
+
* `parseIconValue` reads every format and `NiceIconValue` draws it in React. Single selection
|
|
79
|
+
* only; multi-select keeps names.
|
|
80
|
+
*/
|
|
81
|
+
valueFormat?: NiceIconPickerValueFormat;
|
|
82
|
+
/**
|
|
83
|
+
* Icons can be stacked on the chosen one (1.3.9): an "Overlays" tab in the panel with the
|
|
84
|
+
* NiceIconStacker — position, size, text and colours of every icon put on it. Works with every
|
|
85
|
+
* `valueFormat` (1.3.10; HTML only before). Single selection only.
|
|
86
|
+
*/
|
|
87
|
+
stackable?: boolean;
|
|
88
|
+
/** How the trigger shows the selected icon (1.3.9): the icon alone, or the icon and its name (default). */
|
|
89
|
+
displayMode?: NiceIconPickerDisplayMode;
|
|
90
|
+
/** How the panel lists the icons (1.3.9): a grid of icons (default), or icons with their names. */
|
|
91
|
+
optionDisplayMode?: NiceIconPickerDisplayMode;
|
|
92
|
+
/** Name of the hidden input that carries the value in a form (1.3.9) — one per icon in multi-select. */
|
|
93
|
+
name?: string;
|
|
94
|
+
/** Accessible name of the trigger — the field's label; the selected icon's name follows it (1.3.9). */
|
|
95
|
+
'aria-label'?: string;
|
|
96
|
+
/** Id of the root element (1.3.9). */
|
|
97
|
+
id?: string;
|
|
98
|
+
/** Test id on the root element (1.3.9). */
|
|
99
|
+
testId?: string;
|
|
100
|
+
'data-testid'?: string;
|
|
101
|
+
/** Multi-select mode: several icons, names only. */
|
|
51
102
|
multiSelect?: boolean;
|
|
52
103
|
/** Maximum number of icons that can be selected in multi-select mode */
|
|
53
104
|
maxSelections?: number;
|
|
@@ -55,6 +106,13 @@ export interface NiceIconPickerProps {
|
|
|
55
106
|
placeholder?: string;
|
|
56
107
|
/** Icon variant for preview rendering */
|
|
57
108
|
variant?: IconVariant;
|
|
109
|
+
/**
|
|
110
|
+
* What the icons are drawn with — in the grid, the trigger, the stack and the stored HTML (1.3.9):
|
|
111
|
+
* colours, stroke width… The accent defaults to the page's background
|
|
112
|
+
* (`var(--nice-bg-primary, white)`), so what is cut out of an icon or stacked on it shows in a dark
|
|
113
|
+
* theme as well; `variant` stays a prop of its own.
|
|
114
|
+
*/
|
|
115
|
+
iconProps?: Partial<NtdIconProps>;
|
|
58
116
|
/** Icon size for grid preview */
|
|
59
117
|
gridIconSize?: IconSize | number;
|
|
60
118
|
/** Icon size in the trigger button */
|
|
@@ -120,29 +178,23 @@ export interface NiceIconPickerHandle {
|
|
|
120
178
|
/**
|
|
121
179
|
* A fully-featured icon picker dropdown component.
|
|
122
180
|
*
|
|
123
|
-
* Provides a trigger button that opens a searchable, categorized icon grid.
|
|
124
|
-
*
|
|
125
|
-
*
|
|
181
|
+
* Provides a trigger button that opens a searchable, categorized icon grid. The value binds both
|
|
182
|
+
* ways — `value` / `defaultValue` + `onChange` (1.3.9) — as the icon's export name, a stack as
|
|
183
|
+
* short code (`Folder(Star@tr)`), JSON or HTML (`valueFormat`). With `stackable` the panel gets
|
|
184
|
+
* an "Overlays" tab where icons are stacked on the chosen one. Names show without `Ntd`; the
|
|
185
|
+
* trigger shows the icon alone or the icon and its name (`displayMode`). Keyboard: arrows in the
|
|
186
|
+
* grid, Escape to close.
|
|
126
187
|
*
|
|
127
188
|
* **Styling:** Uses CSS variables for theming (see `NiceIconPicker.css`).
|
|
128
189
|
* Override `--ntd-picker-bg`, `--ntd-picker-accent`, etc. on a parent element.
|
|
129
190
|
*
|
|
130
191
|
* @example
|
|
131
192
|
* ```tsx
|
|
132
|
-
* import { NiceIconPicker } from '@
|
|
133
|
-
*
|
|
134
|
-
* function IconSelectField({ icons }) {
|
|
135
|
-
* const [selected, setSelected] = useState<string | null>(null);
|
|
193
|
+
* import { NiceIconPicker } from '@nice2dev/icons';
|
|
136
194
|
*
|
|
137
|
-
*
|
|
138
|
-
*
|
|
139
|
-
*
|
|
140
|
-
* value={selected}
|
|
141
|
-
* onChange={(name) => setSelected(name)}
|
|
142
|
-
* variant="solid"
|
|
143
|
-
* placeholder="Pick icon..."
|
|
144
|
-
* />
|
|
145
|
-
* );
|
|
195
|
+
* function IconField({ icons, value, onChange }) {
|
|
196
|
+
* // stores `NtdFolder`, or `Folder(Star@tr)` with a star stacked in its corner
|
|
197
|
+
* return <NiceIconPicker icons={icons} value={value} onChange={onChange} stackable />;
|
|
146
198
|
* }
|
|
147
199
|
* ```
|
|
148
200
|
*/
|
|
@@ -6,9 +6,15 @@ export type { NiceIconStackLayer } from './iconStack';
|
|
|
6
6
|
export { niceIconStackCode } from './iconStack';
|
|
7
7
|
/** Actions a parent can run on the stacker — e.g. an "add" button of its own (1.3.6). */
|
|
8
8
|
export interface NiceIconStackerHandle {
|
|
9
|
-
/**
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Adds an icon into the selected layer, as the "add" button does — `current` when no icon is given
|
|
11
|
+
* (the icon argument since 1.3.9).
|
|
12
|
+
*/
|
|
13
|
+
add: (icon?: {
|
|
14
|
+
icon: string;
|
|
15
|
+
variant?: IconVariant;
|
|
16
|
+
}) => void;
|
|
17
|
+
/** Empties the stack (with `keepBase`: takes off what is stacked on the base). */
|
|
12
18
|
clear: () => void;
|
|
13
19
|
}
|
|
14
20
|
export interface NiceIconStackerProps {
|
|
@@ -25,16 +31,31 @@ export interface NiceIconStackerProps {
|
|
|
25
31
|
icon: string;
|
|
26
32
|
variant?: IconVariant;
|
|
27
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* The "add" button asks for an icon instead of adding `current` (1.3.9) — a picker opens its grid
|
|
36
|
+
* and calls the handle's `add(icon)` with the one chosen. Gets the layer the icon will go into.
|
|
37
|
+
*/
|
|
38
|
+
onAddClick?: (target: NiceIconStackLayer | undefined) => void;
|
|
28
39
|
/** Props for the preview of the stack: colours, stroke width, the base's variant. */
|
|
29
40
|
previewProps?: Partial<NtdIconProps>;
|
|
41
|
+
/** An icon's name as shown (1.3.9). Default: the export name without `Ntd`. */
|
|
42
|
+
iconLabel?: (name: string) => string;
|
|
43
|
+
/** Shows the JSX that draws the stack, folded under the layers (1.3.9; default `true`). */
|
|
44
|
+
showCode?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* The base stays (1.3.9): it has no remove button and "clear" takes off only what is stacked on
|
|
47
|
+
* it — for a picker, where the base is the chosen icon and is swapped, not removed.
|
|
48
|
+
*/
|
|
49
|
+
keepBase?: boolean;
|
|
30
50
|
className?: string;
|
|
31
51
|
}
|
|
32
52
|
/**
|
|
33
|
-
* NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it,
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
53
|
+
* NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, nested
|
|
54
|
+
* any number of levels deep (1.3.6) with text innermost. Since 1.3.9 it is laid out to fit a picker's
|
|
55
|
+
* panel: the stack drawn large and small, the layers as a list, and under it the selected layer —
|
|
56
|
+
* where it sits (picked on a pad shaped like its parent), its size and text, with the turn, nudge,
|
|
57
|
+
* colours and binding folded under "More". A new icon goes into the selected layer and is selected,
|
|
58
|
+
* so adding again goes one level deeper; select an outer layer to add side by side. The JSX that
|
|
59
|
+
* draws the stack is folded at the end. `NiceIconStack` draws a stack built here from data.
|
|
39
60
|
*/
|
|
40
61
|
export declare const NiceIconStacker: React.ForwardRefExoticComponent<NiceIconStackerProps & React.RefAttributes<NiceIconStackerHandle>>;
|