:root {
  --accent: #22c55e; --text: #f4f4f5; --muted: #8b8b92; --icon: #d4d4d8;
  --card: rgba(11,11,12,.72); --line: rgba(255,255,255,.22);
  --panel: rgba(255,255,255,.035); --panel-line: rgba(255,255,255,.1);
  --radius: 4px; --radius-in: 4px; --card-w: 420px; --card-blur: 14px; --border-w: 1px; --glow: none;
  --name-size: 26px; --avatar: 92px; --name-color2: #a78bfa;
  --font: system-ui, sans-serif; --name-font: system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { background: #08080a; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-select { user-select: none; -webkit-user-select: none; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* background */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.bg-media { position: absolute; inset: -16px; background-size: cover; background-position: center; }
.bg-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.bg-fx, .cursor-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cursor-fx { z-index: 60; }
.ov { position: absolute; inset: 0; pointer-events: none; }
.ov-grid { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 86px 86px; }
.ov-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.6) 100%); }
.ov-scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px); }
.ov-noise { opacity: .1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation: noise .5s steps(4) infinite; }
@keyframes noise { 25% { background-position: 40px 70px; } 50% { background-position: -60px 20px; } 75% { background-position: 30px -50px; } }

/* stage and card */
.stage { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 56px 16px; perspective: 1000px; }
.stage.waiting .card { opacity: 0; }
.tilt, .pulse { width: min(var(--card-w), 100%); transform-style: preserve-3d; will-change: transform; }
.pulse { width: 100%; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding: 30px 26px 18px;
  background: var(--card); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--glow);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); text-align: center;
}
.col-a, .col-b { display: contents; }
.ident { order: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.avatar { order: 1; }
.badges { order: 3; }
.links { order: 4; }
.widgets { order: 5; }
.player { order: 6; }
.hint { order: 7; }
.stats { order: 8; }

/* avatar */
.avatar { position: relative; width: var(--avatar); height: var(--avatar); flex: none; }
.avatar > img:first-child { width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.shape-circle > img:first-child { border-radius: 50%; }
.shape-rounded > img:first-child { border-radius: 26%; }
.shape-square > img:first-child { border-radius: 4px; }
.has-ring > img:first-child { box-shadow: 0 0 0 2.5px var(--ring); }
.decoration { position: absolute; inset: -11%; width: 122%; height: 122%; max-width: none; pointer-events: none; }

/* name */
.name-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; }
.name { position: relative; font: 700 var(--name-size)/1.2 var(--name-font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.verified { flex: none; width: 21px; height: 21px; color: #fff; }
.verified svg { width: 100%; height: 100%; fill: #1d9bf0; stroke: #fff; stroke-width: 1.8; }
.verified svg path:first-child { stroke: #1d9bf0; }
.ue-glow { text-shadow: 0 0 10px var(--name-color2), 0 0 26px var(--name-color2); }
.ue-neon { color: #fff; text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent), 0 0 34px var(--name-color2); animation: neon 4s linear infinite; }
@keyframes neon { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; } 20%, 64% { opacity: .55; } }
.ue-rainbow, .ue-gradient, .ue-shimmer { background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 3.4s linear infinite; }
.ue-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #7cf29c, #5ec8ff, #b18cff, #ff5f6d); }
.ue-gradient { background-image: linear-gradient(90deg, var(--accent), var(--name-color2), var(--accent)); }
.ue-shimmer { background-image: linear-gradient(100deg, var(--text) 40%, #fff 50%, var(--name-color2) 54%, var(--text) 62%); }
@keyframes flow { to { background-position: -220% center; } }
.ue-glitch::before, .ue-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.ue-glitch::before { color: #ff3df0; animation: glitch 2.6s steps(2) infinite; clip-path: inset(0 0 55% 0); }
.ue-glitch::after { color: #2df7ff; animation: glitch 2.1s steps(2) infinite reverse; clip-path: inset(50% 0 0 0); }
@keyframes glitch { 0%, 86%, 100% { transform: none; opacity: 0; } 88% { transform: translate(-3px, 1px); opacity: .9; } 92% { transform: translate(3px, -1px); opacity: .9; } 96% { transform: translate(-1px, 0); opacity: .9; } }
.ue-wave span { display: inline-block; animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.22em); } }
.spark { position: absolute; width: 11px; height: 11px; background: var(--name-color2); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: spark 2.3s ease-in-out infinite; opacity: 0; }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

.bio { min-height: 1.3em; color: var(--muted); font-size: 14.5px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.status-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.status-dot { flex: none; display: block; width: 8px; height: 8px; border-radius: 50%; }
.emoji { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* badges */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.badge { --badge: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--badge); }
.badge svg { width: 14px; height: 14px; flex: none; }
.badges-chips .badge { padding: 5px 10px; border: 1px solid var(--panel-line); border-radius: var(--radius-in); }
.badges-icons { padding: 4px 9px; gap: 8px; background: var(--panel); border-radius: 99px; }
.badges-icons .badge { --badge: var(--icon); }

/* links */
.links { --brand: var(--icon); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 100%; }
.link { display: inline-flex; align-items: center; color: var(--brand); transition: transform .18s, color .18s, background .18s, border-color .18s, box-shadow .18s; }
.link-glyph { display: grid; place-items: center; width: 19px; height: 19px; flex: none; }
.link-glyph svg, .link-glyph img { width: 100%; height: 100%; object-fit: contain; }
.links-circles .link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--panel); }
.links-plain, .carousel-view { gap: 14px; }
.links-plain .link-glyph, .links-carousel .link-glyph { width: 28px; height: 28px; }
.links-carousel { flex-wrap: nowrap; gap: 6px; }
.carousel-view { display: flex; align-items: center; }
.links-buttons { flex-direction: column; align-items: stretch; width: 100%; }
.links-buttons .link { width: 100%; gap: 11px; padding: 11px 13px; border: 1px solid var(--panel-line); border-radius: var(--radius-in); background: var(--panel); color: var(--text); text-align: left; font-size: 14px; font-weight: 600; }
.links-buttons .link-glyph { color: var(--brand); }
.link-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-go { width: 14px; height: 14px; color: var(--muted); }
.link-go svg { width: 100%; height: 100%; }
@media (hover: hover) {
  .hover-lift .link:hover { transform: translateY(-3px); color: var(--accent); }
  .hover-glow .link:hover { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
  .hover-scale .link:hover { transform: scale(var(--hover-scale, 1.06)); color: var(--accent); z-index: 2; }
  .hover-spin .link:hover .link-glyph { transform: rotate(360deg); transition: transform .5s; }
  .link:hover { border-color: var(--accent); }
}

/* shared small things */
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--text); border-radius: var(--radius-in); transition: background .15s; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--panel); }
.range { --fill: 0%; flex: 1; min-width: 0; height: 14px; appearance: none; -webkit-appearance: none; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--text) var(--fill), var(--panel-line) var(--fill)); }
.range::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--text) var(--fill), var(--panel-line) var(--fill)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: var(--text); }
.range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--text); }

/* player */
.player { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-in); background: var(--panel); text-align: left; }
.p-top { display: flex; align-items: center; gap: 12px; }
.p-art { display: grid; place-items: center; width: 38px; height: 38px; flex: none; overflow: hidden; color: var(--muted); border: 1px solid var(--panel-line); border-radius: var(--radius-in); }
.p-art svg { width: 16px; height: 16px; }
.p-art img { width: 100%; height: 100%; object-fit: cover; }
.p-meta { flex: 1; min-width: 0; }
.p-label { font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.p-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-controls { display: flex; gap: 2px; }
.p-play { border: 1px solid var(--panel-line); background: var(--card); }
.p-viz { display: block; width: 100%; height: 26px; margin-top: 12px; }
.p-line { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.p-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 28px; }
.p-time:last-child { text-align: right; }
.p-volline { padding-top: 8px; border-top: 1px solid var(--panel-line); }
.p-vol-icon { width: 14px; height: 14px; color: var(--muted); }
.p-vol-icon svg { width: 100%; height: 100%; display: block; }
.player-mini { padding: 9px 11px; }
.player-mini .p-label { display: none; }
.player-mini .p-line { margin-top: 4px; }
.sound-btn { position: fixed; z-index: 30; top: 14px; left: 14px; display: flex; align-items: center; gap: 4px; padding: 3px; color: var(--text); background: rgba(0,0,0,.45); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sound-btn button { display: grid; place-items: center; width: 40px; height: 40px; }
.sound-btn svg { width: 20px; height: 20px; }
.sound-btn .range { width: 0; flex: none; opacity: 0; transition: width .2s, opacity .2s, margin .2s; }
.sound-btn:hover .range, .sound-btn:focus-within .range { width: 96px; margin-right: 10px; opacity: 1; }

/* widgets */
.widgets { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.widget { padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: var(--radius-in); background: var(--panel); min-width: 0; }
.w-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.widget .w-row + .w-row, .widget .w-link + .w-row, .widget .w-row + .w-link { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--panel-line); }
.w-link { display: block; }
.w-pic { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: var(--icon); }
.w-pic > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-in); }
.w-glyph { display: block; width: 21px; height: 21px; flex: none; color: var(--icon); }
.w-glyph svg { width: 100%; height: 100%; display: block; }
.w-avatar { position: relative; width: 40px; height: 40px; }
.w-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.w-avatar .status-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; box-shadow: 0 0 0 2.5px var(--card); }
.w-text { flex: 1; min-width: 0; }
.w-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.w-sub, .w-time { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-bar { height: 3px; margin-top: 9px; background: var(--panel-line); border-radius: 3px; overflow: hidden; }
.w-bar i { display: block; height: 100%; width: 0; background: #1db954; }
.w-times { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-btn { flex: none; padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: #fff; background: #248046; border-radius: var(--radius-in); }
.w-note { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-video { padding: 0; overflow: hidden; }
.w-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* stats and hint */
.stats { align-self: flex-start; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text); }
.stat { display: inline-flex; align-items: center; gap: 5px; }
.stat svg { width: 14px; height: 14px; color: var(--muted); }
.stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hint { padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.hint:hover { color: var(--text); }

/* layouts */
.layout-wide { display: grid; grid-template-columns: 1fr; text-align: left; padding: 22px; }
.layout-wide .col-a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
.layout-wide .ident { align-items: flex-start; }
.layout-wide .name-row { justify-content: flex-start; flex-wrap: wrap; }
.layout-wide .badges, .layout-wide .links { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
.layout-wide .links-buttons { width: 100%; }
.layout-wide .col-b { display: flex; flex-direction: column; gap: 12px; }
.layout-wide .hint { justify-self: end; grid-row: 3; align-self: center; }

.layout-floating { align-items: flex-start; text-align: left; margin-top: 44px; padding: 0 26px 20px; }
.layout-floating .avatar { margin-top: -38px; }
.layout-floating .ident { align-items: flex-start; }
.layout-floating .name-row { justify-content: flex-start; }
.layout-floating .badges, .layout-floating .links { justify-content: flex-start; }
.layout-floating .stats { order: 0; position: absolute; top: 20px; right: 24px; align-self: auto; max-width: calc(100% - var(--avatar) - 60px); flex-wrap: wrap; justify-content: flex-end; }
.layout-floating .hint { align-self: center; }

.layout-minimal { background: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.layout-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 24px; row-gap: 10px; align-items: start; }
.layout-split .col-a { grid-column: 1; grid-row: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 14px; }
.layout-split .col-b { grid-column: 2; grid-row: 1; display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.layout-split .stats { grid-column: 1; grid-row: 2; align-self: center; }
.layout-split .hint { grid-column: 2; grid-row: 2; justify-self: end; }
.tilt:has(.layout-split) { width: min(calc(var(--card-w) * 1.8), 100%); }
@media (max-width: 640px) {
  .layout-split { grid-template-columns: minmax(0, 1fr); }
  .layout-split .col-b, .layout-split .stats, .layout-split .hint { grid-column: 1; grid-row: auto; }
}

/* entrances */
.in-fade { animation: in-fade .7s ease both; }
.in-rise { animation: in-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.in-zoom { animation: in-zoom .7s cubic-bezier(.2,1.2,.4,1) both; }
.in-flip { animation: in-flip .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes in-fade { from { opacity: 0; } }
@keyframes in-rise { from { opacity: 0; transform: translateY(34px); } }
@keyframes in-zoom { from { opacity: 0; transform: scale(.82); } }
@keyframes in-flip { from { opacity: 0; transform: perspective(900px) rotateX(-55deg); } }

/* enter screen */
.enter { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; width: 100%; overflow: hidden; transition: opacity .7s; }
.enter-half { position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(var(--enter-blur)); -webkit-backdrop-filter: blur(var(--enter-blur)); transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .7s; }
.enter-half.b { display: none; }
.enter-text { position: relative; font-size: 17px; font-weight: 600; color: var(--text); animation: breathe 2.2s ease-in-out infinite; transition: opacity .3s, transform .7s; }
.enter.gone { pointer-events: none; }
.enter.gone .enter-text { opacity: 0; }
.tr-fade.gone { opacity: 0; }
.tr-curtain .enter-half.b, .tr-shutter .enter-half.b { display: block; }
.tr-curtain .a { right: 50%; } .tr-curtain .b { left: 50%; }
.tr-shutter .a { bottom: 50%; } .tr-shutter .b { top: 50%; }
.tr-curtain.gone .a { transform: translateX(-100%); } .tr-curtain.gone .b { transform: translateX(100%); }
.tr-shutter.gone .a { transform: translateY(-100%); } .tr-shutter.gone .b { transform: translateY(100%); }
.tr-zoom.gone .enter-half { transform: scale(1.7); opacity: 0; }
.tr-zoom.gone .enter-text { transform: scale(5); }
.tr-iris { clip-path: circle(150% at 50% 50%); transition: clip-path .9s cubic-bezier(.76,0,.24,1); }
.tr-iris.gone { clip-path: circle(0 at 50% 50%); }
@keyframes breathe { 50% { opacity: .45; } }

/* console */
.console { position: fixed; z-index: 50; left: 50%; bottom: 16px; translate: -50% 0; width: min(640px, calc(100vw - 32px)); height: min(340px, 60vh); display: flex; flex-direction: column; padding: 12px 14px; background: rgba(6,6,7,.93); border: 1px solid var(--line); border-radius: var(--radius-in); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 13px/1.5 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--text); }
.console-out { flex: 1; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-line { display: flex; gap: 8px; margin-top: 6px; color: var(--accent); }
.console-line span { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-line input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: none; border: 0; outline: 0; }
.c-dim { color: var(--muted); }
.c-cmd { color: var(--accent); }
.c-err { color: #f87171; }

/* cursor and toast */
.cur-dot, .cur-ring { position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none; }
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.cur-ring { width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1.5px solid; border-radius: 50%; opacity: .7; }
.toast { position: fixed; z-index: 45; left: 50%; bottom: 26px; translate: -50% 12px; padding: 9px 15px; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(10,10,11,.92); border: 1px solid var(--line); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }

@media (max-width: 480px) {
  .stage { padding: 40px 12px; }
  .card { padding: 24px 16px 16px; }
  .layout-wide { padding: 16px; }
  .layout-floating { padding: 0 16px 16px; }
  .sound-btn .range { display: none; }
}
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* beat glow: decoration only, so nothing clickable ever moves with the music */
.pulse { position: relative; }
.beat { --beat: 0; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; opacity: calc(var(--beat) * 1.15); box-shadow: 0 0 calc(14px + var(--beat) * 74px) calc(var(--beat) * 11px) var(--accent); }

/* card effects */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.border-spin::before, .border-rainbow::before { content: ''; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; pointer-events: none; animation: spin 4s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.border-spin::before { background: conic-gradient(from var(--spin), transparent 0 62%, var(--accent) 88%, #fff 100%); }
.border-rainbow::before { background: conic-gradient(from var(--spin), #ff5f6d, #ffc371, #7cf29c, #5ec8ff, #b18cff, #ff5f6d); }
@keyframes spin { to { --spin: 360deg; } }
.shine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.11) 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: shine 6s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -40% 0; } }
.spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.09), transparent 70%); }

/* avatar effects */
.avfx-float { animation: av-float 4s ease-in-out infinite; }
@keyframes av-float { 50% { transform: translateY(-7px); } }
.avfx-glow > img:first-child { animation: av-glow 2.6s ease-in-out infinite; }
@keyframes av-glow { 50% { filter: drop-shadow(0 0 16px var(--accent)); } }
.avfx-spin::before { content: ''; position: absolute; inset: -6px; padding: 2.5px; border-radius: 50%; background: conic-gradient(from var(--spin), transparent 0 40%, var(--accent), #fff); animation: spin 2.8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.shape-rounded.avfx-spin::before { border-radius: 30%; }
.shape-square.avfx-spin::before { border-radius: 8px; }
.avfx-beat { transform: scale(calc(1 + var(--beat, 0) * .13)); }

/* new name effects */
.ue-fire { color: #fff3d6; animation: fire 1.1s ease-in-out infinite alternate; }
@keyframes fire {
  from { text-shadow: 0 0 6px #fff, 0 -4px 10px #ffb400, 0 -9px 18px #ff6a00, 0 -15px 28px #e0200a; }
  to { text-shadow: 0 0 5px #fff, 2px -6px 12px #ffc400, -2px -12px 22px #ff5a00, 2px -20px 34px #d81a06; }
}
.ue-chrome { background: linear-gradient(100deg, #6b7280, #f9fafb 22%, #9ca3af 38%, #fff 52%, #6b7280 70%, #e5e7eb) 0 0 / 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 6s linear infinite; }
.ue-outline { -webkit-text-stroke: 1px var(--text); color: transparent; background: linear-gradient(90deg, var(--text) 50%, transparent 50%) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: outline 5s ease-in-out infinite alternate; }
@keyframes outline { to { background-position: 0 0; } }
.ue-bounce span { display: inline-block; transform-origin: bottom; animation: bounce 2s cubic-bezier(.3,1.5,.5,1) infinite; }
@keyframes bounce { 0%, 40%, 100% { transform: none; } 12% { transform: translateY(-.32em) scaleY(1.08); } 26% { transform: scale(1.1, .88); } }