/* Styles for delight.js plus the CSS-only bits (equalizer, vinyl, icon hovers). */

.nx-fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }
.nx-fx-ambient { z-index: 40; }
.nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rolling digits: each digit is a 0-9 column moved by --d. */
.nx-roll { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1.15; vertical-align: bottom; }
.nx-roll-d { display: inline-block; height: 1.15em; overflow: hidden; }
.nx-roll-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -10%)); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 70ms); }
.nx-roll-col > span { height: 1.15em; text-align: center; }
/* Pages style "stat span" for labels (.features-stat span); the roll's own spans must keep the number's look. */
[data-roll] .nx-roll, [data-roll] .nx-roll span { font: inherit; line-height: 1.15; color: inherit; letter-spacing: inherit; text-transform: none; opacity: 1; margin: 0; padding: 0; }

/* Equalizer bars: <span class="nx-eq"><i></i><i></i><i></i><i></i></span> */
.nx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; color: var(--green, #22c55e); flex: none; }
.nx-eq i { width: 3px; height: 100%; border-radius: var(--radius-sm); background: currentColor; transform-origin: bottom; animation: nx-eq 1s ease-in-out infinite; }
.nx-eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.nx-eq i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.55s; }
.nx-eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.15s; }
.nx-eq.is-paused i { animation-play-state: paused; opacity: .55; }
@keyframes nx-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.nx-playing-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: var(--green, #22c55e); }

/* Vinyl peeking out of the album sleeve; spins while playing. */
.nx-sleeve { position: relative; flex: none; margin-right: 42px; isolation: isolate; }
.nx-sleeve .mu-art { position: relative; z-index: 1; box-shadow: 0 6px 18px rgb(0 0 0 / .28); }
.nx-disc { position: absolute; top: 4%; left: 48%; width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
    background:
        radial-gradient(circle, var(--brand, #0062ff) 0 15%, #111 15.5% 18%, transparent 18.5%),
        repeating-radial-gradient(circle, #1b1b1f 0 1.5px, #2c2c33 1.5px 3px);
    border: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 4px 14px rgb(0 0 0 / .35);
    animation: nx-spin 3.2s linear infinite; }
.nx-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgb(255 255 255 / .18) 25%, transparent 32% 70%, rgb(255 255 255 / .12) 75%, transparent 82%); }
.nx-sleeve.is-paused .nx-disc { animation-play-state: paused; }
.nx-sleeve { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.nx-sleeve img { pointer-events: none; -webkit-user-drag: none; }
.nx-sleeve.is-scrubbing { cursor: grabbing; }
.nx-sleeve.is-scrubbing .nx-disc { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0062ff) 50%, transparent), 0 4px 14px rgb(0 0 0 / .35); }
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* Paper plane (support form submit). */
.nx-plane { position: fixed; width: 44px; height: 44px; z-index: 9999; pointer-events: none; color: var(--brand, #0062ff); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); }
.nx-plane svg { width: 100%; height: 100%; }

/* Connection pill. */
.nx-conn { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9990; display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--surface, #111) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(0 0 0 / .25); backdrop-filter: blur(10px); animation: nx-pill-in .3s cubic-bezier(.16, 1, .3, 1); }
.nx-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 0 rgb(245 158 11 / .6); animation: nx-pulse 1.4s ease-out infinite; }
.nx-conn.is-ok .nx-conn-dot { background: var(--green, #22c55e); animation: none; }
@keyframes nx-pulse { to { box-shadow: 0 0 0 10px rgb(245 158 11 / 0); } }
@keyframes nx-pill-in { from { opacity: 0; transform: translate(-50%, -12px); } }

/* Pull-to-refresh indicator. */
.nx-ptr { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; width: 38px; height: 38px; padding: 9px; border-radius: 50%; z-index: 9990; pointer-events: none; opacity: 0; transform: translate(-50%, -50px); color: var(--brand, #0062ff); background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(0 0 0 / .2); }
.nx-ptr svg { width: 100%; height: 100%; display: block; }
.nx-ptr.is-spinning { opacity: 1; }
.nx-ptr.is-spinning svg { animation: nx-spin .7s linear infinite; }

.nx-bat { position: fixed; z-index: 9999; font-size: 22px; pointer-events: none; }

/* Icon micro-animations on hover: each icon does its own thing. */
@media (hover: hover) {
    :is(.nav-link, .topnav-link, .btn):hover svg.lucide { animation: nx-icon-lift .45s cubic-bezier(.16, 1, .3, 1); }
    :is(.nav-link, .btn):hover :is(.lucide-settings, .lucide-settings-2, .lucide-server-cog, .lucide-sliders-horizontal) { animation: nx-icon-turn .6s cubic-bezier(.16, 1, .3, 1); }
    :is(.nav-link, .btn):hover :is(.lucide-bell, .lucide-send, .lucide-gift, .lucide-trophy, .lucide-star) { animation: nx-icon-ring .55s ease-in-out; }
    :is(.nav-link, .btn):hover :is(.lucide-music, .lucide-radio, .lucide-play, .lucide-play-circle) { animation: nx-icon-beat .5s ease-in-out; }
    :is(.nav-link, .btn):hover :is(.lucide-shopping-cart, .lucide-shopping-bag, .lucide-receipt, .lucide-ticket-percent) { animation: nx-icon-roll .5s ease-in-out; }
    :is(.nav-link, .btn):hover :is(.lucide-refresh-cw, .lucide-history, .lucide-rotate-ccw) { animation: nx-icon-back .55s cubic-bezier(.16, 1, .3, 1); }
    :is(.nav-link, .btn):hover :is(.lucide-log-out, .lucide-door-open, .lucide-arrow-right, .lucide-rocket) { animation: nx-icon-out .5s ease-in-out; }
}
@keyframes nx-icon-lift { 40% { transform: translateY(-2px) scale(1.08); } }
@keyframes nx-icon-turn { to { transform: rotate(90deg); } }
@keyframes nx-icon-ring { 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
@keyframes nx-icon-beat { 30% { transform: scale(1.2); } 60% { transform: scale(.95); } }
@keyframes nx-icon-roll { 35% { transform: translateX(3px); } 70% { transform: translateX(-1px); } }
@keyframes nx-icon-back { to { transform: rotate(-360deg); } }
@keyframes nx-icon-out { 45% { transform: translateX(3px); } }

/* Hold to confirm: the fill grows while held (--hold 0..1, set by delight.js). */
[data-hold] { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
[data-hold]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: .22; transform: scaleX(var(--hold, 0)); transform-origin: left; pointer-events: none; }
[data-hold].is-holding { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

/* Cursor glow on [data-glow] buttons. */
[data-glow] { position: relative; overflow: hidden; isolation: isolate; }
[data-glow]::after { content: ""; display: block; position: absolute; inset: -1px; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .25s; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .35), transparent 60%); }
[data-glow]:not(.btn-primary)::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand, #0062ff) 40%, transparent), transparent 60%); }
@media (hover: hover) { [data-glow]:hover::after { opacity: 1; } }

.nx-spark { position: fixed; width: 4px; height: 18px; border-radius: var(--radius-sm); pointer-events: none; z-index: 9999; background: #f5b301; }

/* Long press: a ring traces the element while the finger is down. */
@media (pointer: coarse) { .nx-lp { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.is-pressing { position: relative; transform: scale(.97); transition: transform .2s; }
.is-pressing::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--brand, #0062ff); pointer-events: none; animation: nx-press .45s linear forwards; }
@keyframes nx-press { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.nx-fan { position: fixed; width: 0; height: 0; z-index: 9995; }
.nx-fan > * { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; width: 66px; padding: 8px 0; margin: -28px 0 0 -33px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: .7rem; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgb(0 0 0 / .3); transform: rotate(var(--a)) translateX(96px) rotate(calc(var(--a) * -1)); animation: nx-fan .35s cubic-bezier(.16, 1, .3, 1) both; }
.nx-fan svg { width: 18px; height: 18px; }
@keyframes nx-fan { from { opacity: 0; transform: rotate(var(--a)) translateX(10px) rotate(calc(var(--a) * -1)) scale(.4); } }

/* Play/pause morph: the two halves of the triangle become the two bars.
   CSS d: morphs in Chrome/Firefox; Safari swaps instantly. */
.nx-pp { width: 18px; height: 18px; fill: currentColor; }
.nx-pp path { transition: d .38s cubic-bezier(.16, 1, .3, 1); }
.nx-pp .a { d: path("M7 5 L12.5 8.5 L12.5 15.5 L7 19 Z"); }
.nx-pp .b { d: path("M12.5 8.5 L18 12 L18 12 L12.5 15.5 Z"); }
.is-playing > .nx-pp .a { d: path("M6 5 L10 5 L10 19 L6 19 Z"); }
.is-playing > .nx-pp .b { d: path("M14 5 L18 5 L18 19 L14 19 Z"); }

/* Seek ±10s icon: the arrow spins, the number stays put. */
.nx-seek { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nx-seek text { fill: currentColor; stroke: none; font: 800 7.5px/1 Inter, system-ui, sans-serif; }
.nx-seek .spin { transform-origin: 12px 12px; transform-box: view-box; }

/* Peek: a card under the Custom Bot button, desktop hover only. */
.nx-peek { position: relative; display: inline-flex; }
.nx-peek-card { display: none; }
@media (hover: hover) and (min-width: 1024px) {
    .nx-peek-card { display: block; position: absolute; top: calc(100% + 10px); right: 0; width: 260px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 18px 40px rgb(0 0 0 / .3); z-index: 80; text-align: left; font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.96); transform-origin: top right; filter: blur(4px); transition: opacity .2s, transform .3s cubic-bezier(.16, 1, .3, 1), filter .25s, visibility 0s .3s; pointer-events: none; }
    .nx-peek:hover .nx-peek-card, .nx-peek:focus-within .nx-peek-card { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .12s, .12s, .12s, 0s; }
}
.nx-peek-head { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.nx-peek-head img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--green, #22c55e); }
.nx-peek-head b { font-size: .95rem; }
.nx-peek-text { display: block; font-size: .84rem; line-height: 1.5; color: var(--muted); white-space: normal; }

/* Chat launcher: the bubble turns into an X while the chat is open. */
.nxchat-launcher-icon { display: grid; place-items: center; }
.nxchat-launcher-icon svg { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.nxchat-launcher-icon .nxchat-ico-x { opacity: 0; transform: rotate(-90deg) scale(.5); }
.nxchat.is-open .nxchat-launcher-icon .nxchat-ico-chat { opacity: 0; transform: rotate(90deg) scale(.5); }
.nxchat.is-open .nxchat-launcher-icon .nxchat-ico-x { opacity: 1; transform: none; }

/* The orb: Noxyr's face. <span class="nx-orb" data-orb><span class="nx-orb-eyes"><i></i><i></i></span></span>
   Size with --s. delight.js moves the eyes (--ex/--ey) toward the cursor and glances when idle.
   .is-asleep closes the eyes, .is-shy shuts them and looks away, .is-float bobs. */
.nx-orb { --s: 96px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
    background:
        radial-gradient(circle at 31% 24%, rgb(255 255 255 / .95) 0 5%, rgb(226 222 255 / .65) 12%, transparent 30%),
        radial-gradient(ellipse 70% 40% at 50% 100%, #8af4ff 0 20%, rgb(103 232 249 / .5) 45%, transparent 72%),
        radial-gradient(circle at 48% 42%, #5a4bff 0 40%, #4a3bff 58%, #7d6dff 86%, #b3a9ff 100%);
    box-shadow: inset 0 calc(var(--s) * -.07) calc(var(--s) * .14) rgb(125 240 255 / .55), inset 0 calc(var(--s) * .06) calc(var(--s) * .16) rgb(255 255 255 / .35),
        0 calc(var(--s) * .2) calc(var(--s) * .38) calc(var(--s) * -.1) rgb(90 75 255 / .55), 0 calc(var(--s) * .12) calc(var(--s) * .3) calc(var(--s) * -.06) rgb(103 232 249 / .45); }
.nx-orb-eyes { position: absolute; left: 50%; top: 43%; display: flex; gap: calc(var(--s) * .17); transform: translate(-50%, -50%) translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .18s ease-out; }
.nx-orb-eyes i { display: block; width: calc(var(--s) * .078); height: calc(var(--s) * .2); border-radius: 99px; background: #fff; box-shadow: 0 0 calc(var(--s) * .06) rgb(255 255 255 / .75); animation: nx-orb-blink 4.8s infinite; transform-origin: center; transition: height .25s, transform .25s; }
.nx-orb-eyes i:last-child { animation-delay: .04s; }
@keyframes nx-orb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.nx-orb.is-asleep .nx-orb-eyes i, .nx-orb.is-shy .nx-orb-eyes i { animation: none; transform: scaleY(.14); }
.nx-orb.is-shy .nx-orb-eyes { transform: translate(-50%, -50%) translate(calc(var(--s) * -.16), calc(var(--s) * .04)); }
.nx-orb.is-float { animation: nx-orb-float 3.6s ease-in-out infinite; }
@keyframes nx-orb-float { 50% { transform: translateY(calc(var(--s) * -.06)); } }
.nx-orb.is-happy .nx-orb-eyes i { animation: none; height: calc(var(--s) * .1); border-radius: 99px 99px var(--radius-sm) var(--radius-sm); transform: translateY(calc(var(--s) * .03)); }

/* Living empty states: a sleeping orb with drifting z's; hover (or focus) wakes it. */
.nx-empty { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 12px; text-align: center; list-style: none; }
.nx-empty .nx-orb { margin-bottom: 8px; }
.nx-empty small { color: var(--muted); font-size: .8rem; max-width: 24rem; }
.nx-empty:hover .nx-orb.is-asleep .nx-orb-eyes i { transform: none; animation: nx-orb-blink 4.8s infinite; }
.nx-zzz { position: absolute; top: 8px; left: calc(50% + 22px); pointer-events: none; }
.nx-zzz i { position: absolute; font-style: normal; font-weight: 800; color: var(--muted); opacity: 0; animation: nx-z 3s ease-out infinite; }
.nx-zzz i:nth-child(2) { animation-delay: 1s; font-size: 1.05em; }
.nx-zzz i:nth-child(3) { animation-delay: 2s; font-size: 1.2em; }
.nx-empty:hover .nx-zzz { display: none; }
@keyframes nx-z { 0% { opacity: 0; transform: translate(0, 8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -28px); } }

/* "You're all caught up" at the end of a list; the check draws itself (.is-in). */
.nx-caught { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 8px; margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.nx-caught svg { width: 28px; height: 28px; fill: none; stroke: var(--green, #22c55e); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-caught circle, .nx-caught path { stroke-dasharray: 70; stroke-dashoffset: 70; }
.nx-caught.is-in circle { transition: stroke-dashoffset .6s ease-out; stroke-dashoffset: 0; }
.nx-caught.is-in path { transition: stroke-dashoffset .4s ease-out .45s; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .nx-caught circle, .nx-caught path { stroke-dashoffset: 0 !important; transition: none !important; } }

/* "New on Noxyr" stack (drag or ✕ to dismiss). Room below for the cards peeking out. */
.nx-news { position: relative; display: grid; margin-bottom: 24px; padding-bottom: 16px; }
.nx-news[hidden] { display: none; }
.nx-news-card { grid-area: 1 / 1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px rgb(0 0 0 / .16); transform-origin: top center; touch-action: pan-y; user-select: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.nx-news-card.is-drag { transition: none; cursor: grabbing; }
.nx-news-card > div { flex: 1; }
.nx-news-card b { display: block; font-size: .95rem; }
.nx-news-card small { color: var(--muted); font-size: .8rem; }
.nx-news-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--brand, #0062ff); background: color-mix(in srgb, var(--brand, #0062ff) 13%, transparent); }
.nx-news-tag { display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand, #0062ff); }
.nx-news-x { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) {
.nx-news-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
}
@media (max-width: 640px) { .nx-news-card { flex-wrap: wrap; } .nx-news-card .btn { order: 3; width: 100%; justify-content: center; } }

/* Discord-style spoilers: hidden until clicked, click again hides. */
.nx-spoiler { border-radius: 4px; padding: 0 2px; cursor: pointer; background: color-mix(in srgb, currentColor 18%, transparent); transition: background .25s; }
.nx-spoiler:not(.is-shown) { color: transparent; text-shadow: 0 0 8px color-mix(in srgb, var(--text, #fff) 50%, transparent); user-select: none; }
.nx-spoiler.is-shown { background: color-mix(in srgb, var(--text, #fff) 8%, transparent); animation: nx-unblur .4s ease-out; }
@keyframes nx-unblur { from { filter: blur(5px); } }

/* Right-click brand menu on the logo. */
.nx-ctx { position: fixed; z-index: 9996; min-width: 220px; padding: 6px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 36px rgb(0 0 0 / .32); animation: nx-ctx-in .16s cubic-bezier(.16, 1, .3, 1); transform-origin: top left; }
.nx-ctx > * { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--radius-md); border: 0; background: none; color: var(--text); font-size: .84rem; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.nx-ctx > *:focus-visible { background: color-mix(in srgb, var(--brand, #0062ff) 14%, transparent); outline: none; }
@media (hover: hover) and (pointer: fine) {
.nx-ctx > *:hover { background: color-mix(in srgb, var(--brand, #0062ff) 14%, transparent); outline: none; }
}
.nx-ctx svg { width: 16px; height: 16px; }
@keyframes nx-ctx-in { from { opacity: 0; transform: scale(.92); } }

/* Konami party mode. */
html.nx-party .nx-disc, html.nx-party .nf-record { animation-duration: .4s !important; }
html.nx-party .nx-eq i { animation-duration: .22s !important; }
html.nx-party .nx-orb { animation: nx-orb-float .5s ease-in-out infinite !important; }
html.nx-party body { animation: nx-party 1.4s linear infinite; }
@keyframes nx-party { to { filter: hue-rotate(360deg); } }

/* ⌘K first-visit hint. */
.nx-khint { position: fixed; left: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px rgb(0 0 0 / .3); animation: nx-pill-in .35s cubic-bezier(.16, 1, .3, 1); transition: opacity .3s, transform .3s; }
.nx-khint.is-out { opacity: 0; transform: translateY(10px); }
.nx-khint-keys { display: flex; gap: 4px; }
.nx-khint kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: var(--radius-md); font: 800 .8rem/1 Inter, system-ui, sans-serif; color: var(--text); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 3px 0 color-mix(in srgb, var(--text) 18%, transparent); animation: nx-keytap 2.4s ease-in-out infinite; }
.nx-khint kbd:last-child { animation-delay: .25s; }
.nx-khint b { display: block; font-size: .88rem; }
.nx-khint small { color: var(--muted); font-size: .76rem; }
.nx-khint button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: .9rem; }
@keyframes nx-keytap { 0%, 30%, 100% { transform: none; } 40%, 55% { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent); } }

@media (prefers-reduced-motion: reduce) {
    .nx-eq i, .nx-disc, .nx-conn-dot, .nx-ptr.is-spinning svg, .nx-fan > *, .is-pressing::after { animation: none; }
    .nx-pp path, .nxchat-launcher-icon svg, .nx-peek-card { transition: none; }
    .nx-orb, .nx-orb-eyes i, .nx-khint kbd, .nx-ctx, .nx-zzz i { animation: none !important; }
    .nx-roll-col { transition: none; }
    :is(.nav-link, .topnav-link, .btn):hover svg.lucide { animation: none !important; }
}