html, body { margin: 0; height: 100%; background: #080808; }
body { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }

.dys {
  --accent: #1b1b1b; --text: #a4a4a4; --bgc: #080808; --icon: #fff;
  --card: rgba(8,8,8,.2); --box: rgba(27,27,27,.45); --line: rgba(255,255,255,.07);
  --blur: 20px; --dim: .2; --w: 680px; --font: 'JetBrains Mono', ui-monospace, monospace;
  position: fixed; inset: 0; display: flex; overflow-y: auto; overflow-x: hidden;
  padding: 32px 16px; background: var(--bgc); color: var(--text);
  font-family: var(--font); -webkit-font-smoothing: antialiased; perspective: 1400px;
}
.dys.has-cursor, .dys.has-cursor * { cursor: var(--cursor), auto !important; }

.dys-stage { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.dys-stage > * { position: absolute !important; }
.dys-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dys-dim { position: fixed; inset: 0; background: #000; opacity: var(--dim); z-index: 0; pointer-events: none; }
.dys-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- card ---------- */
.dys-card {
  position: relative; z-index: 2; margin: auto; width: min(var(--w), 100%);
  padding: 30px 26px 18px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  will-change: transform;
  animation: dys-rise .9s cubic-bezier(.2,.8,.2,1) backwards;
}
.dys-card > * { position: relative; z-index: 1; }
.dys.parallax .dys-bg { transform: scale(1.08); will-change: transform; }
.dys.entering .dys-card { animation: none; opacity: 0; }
@keyframes dys-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.dys-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.dys-avatar { position: relative; flex: none; width: 118px; height: 118px; user-select: none; -webkit-touch-callout: none; }
.dys-avatar img.av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--box); display: block; }
.dys-avatar img.deco { position: absolute; inset: -11%; width: 122%; height: 122%; pointer-events: none; }
.dys-avatar img { -webkit-user-drag: none; }

.dys-id { min-width: 0; }
.dys-nameRow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dys-name {
  position: relative; margin: 0; font-size: clamp(22px, 4.2vw, 30px); font-weight: 700;
  color: var(--text); letter-spacing: .01em; line-height: 1.15; min-height: 1.15em; word-break: break-word;
}
.dys-name.glow { text-shadow: 0 0 10px var(--text), 0 0 22px var(--textGlow); }
.dys-name .caret { display: inline-block; margin-left: 2px; animation: dys-blink 1s steps(1) infinite; font-weight: 300; }
@keyframes dys-blink { 50% { opacity: 0; } }

.dys-name.rainbow {
  background: linear-gradient(90deg,#ff5f6d,#ffc371,#fffc6d,#6dff8f,#6dd5ff,#b06dff,#ff5f6d);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dys-rainbow 5s linear infinite;
}
.dys-name.rainbow.glow { text-shadow: none; filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
@keyframes dys-rainbow { to { background-position: 300% 0; } }

.dys-name.shake { animation: dys-shake 2.4s infinite; }
@keyframes dys-shake { 0%,88%,100% { transform: none; } 90% { transform: translate(-2px,1px) rotate(-1deg); } 92% { transform: translate(2px,-1px) rotate(1deg); } 94% { transform: translate(-1px,-1px); } 96% { transform: translate(1px,1px); } }

.dys-name.glitch::before, .dys-name.glitch::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.dys-name.glitch::before { color: #ff2a55; transform: translate(2px,0); clip-path: inset(0 0 60% 0); animation: dys-glitch 2.2s infinite steps(2); mix-blend-mode: screen; }
.dys-name.glitch::after { color: #2af0ff; transform: translate(-2px,0); clip-path: inset(55% 0 0 0); animation: dys-glitch 1.7s infinite reverse steps(2); mix-blend-mode: screen; }
@keyframes dys-glitch {
  0% { clip-path: inset(0 0 80% 0); } 20% { clip-path: inset(40% 0 30% 0); } 40% { clip-path: inset(70% 0 5% 0); }
  60% { clip-path: inset(10% 0 60% 0); } 80% { clip-path: inset(50% 0 20% 0); } 100% { clip-path: inset(0 0 90% 0); }
}
.dys-spark { position: absolute; pointer-events: none; font-size: 10px; color: var(--icon); animation: dys-spark 1.2s ease-out forwards; }
@keyframes dys-spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) rotate(160deg) translateY(-8px); } }

.dys-badges { display: flex; gap: 6px; align-items: center; }
.dys-badge {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--box); border: 1px solid var(--line); color: var(--icon);
}
.dys-badge svg, .dys-badge img { width: 16px; height: 16px; }
.dys-badges.glow .dys-badge svg, .dys-badges.glow .dys-badge img { filter: drop-shadow(0 0 5px var(--icon)); }

.dys-desc { margin: 6px 0 0; font-size: 15px; color: var(--text); white-space: pre-line; }
.dys-sub { margin: 4px 0 0; font-size: 12.5px; opacity: .6; }

/* ---------- widgets ---------- */
.dys-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.dys-widgets.one { grid-template-columns: 1fr; }
.dys-widgets:empty { display: none; }
.dys-box {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px; border-radius: 16px; background: var(--box); border: 1px solid var(--line);
  transition: transform .2s, border-color .2s;
}
@media (hover: hover) { .dys-box:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.14); } }
.dys-box .pic { position: relative; flex: none; width: 64px; height: 64px; }
.dys-box .pic > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.05); }
.dys-box .pic > img.sq { border-radius: 14px; }
.dys-box .pic .deco { position: absolute; inset: -12%; width: 124%; height: 124%; border-radius: 0; background: none; }
.dys-box .dot {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 3.5px solid #111; background: #80848e;
}
.dys-box .meta { min-width: 0; flex: 1; }
.dys-box .t { font-size: 17px; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dys-box .s { margin-top: 3px; font-size: 12.5px; opacity: .7; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dys-box .act { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.dys-box .tag { position: absolute; top: 9px; right: 12px; font-size: 10px; opacity: .35; display: flex; gap: 4px; align-items: center; }
.dys-box .tag svg { width: 11px; height: 11px; }
.dys-join {
  display: inline-block; margin-top: 5px; padding: 2px 11px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: #248046; color: #fff; text-decoration: none; transition: background .15s;
}
.dys-join:hover { background: #1a6334; }
.dys-dot-on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #23a55a; margin: 0 4px 1px 0; }
.dys-dot-all { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #80848e; margin: 0 4px 1px 8px; }
.dys-box .counts { font-size: 11.5px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.dys-hint { font-size: 12px; opacity: .8; line-height: 1.4; white-space: normal !important; font-style: normal !important; }

/* ---------- socials ---------- */
.dys-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 4px 0 18px; }
.dys-socials:empty { display: none; }
.dys-social {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 0; padding: 0; color: var(--icon); cursor: pointer; transition: transform .2s;
}
.dys-social img, .dys-social svg { width: 34px; height: 34px; object-fit: contain; }
.dys-socials.glow .dys-social img, .dys-socials.glow .dys-social svg { filter: drop-shadow(0 0 7px var(--iconGlow)); }

[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  padding: 5px 9px; border-radius: 8px; background: rgba(10,10,10,.92); color: #eee; font-size: 11.5px; font-family: var(--font);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s; z-index: 5; font-style: normal;
}
@media (hover: hover) { [data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); } }

.dys-foot { display: flex; align-items: center; gap: 14px; font-size: 13px; opacity: .75; }
.dys-foot:empty { display: none; }
.dys-foot span { display: inline-flex; align-items: center; gap: 6px; }
.dys-foot svg { width: 14px; height: 14px; }

/* ---------- volume ---------- */
.dys-vol {
  position: fixed; top: 18px; left: 18px; z-index: 5; display: flex; align-items: center; gap: 4px;
  height: 46px; padding: 0 6px; border-radius: 14px; background: rgba(20,20,20,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05);
}
.dys-vol button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: #ddd; cursor: pointer; padding: 0; }
.dys-vol svg { width: 22px; height: 22px; }
.dys-vol input { width: 0; opacity: 0; transition: width .25s, opacity .25s, margin .25s; accent-color: #ddd; margin: 0; }
.dys-vol:hover input, .dys-vol:focus-within input { width: 100px; opacity: 1; margin-right: 8px; }
.dys-vol .song { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; opacity: 0; transition: .25s; color: #ddd; }
.dys-vol:hover .song { max-width: 200px; opacity: .8; margin-right: 8px; }

/* ---------- enter screen ---------- */
.dys-enter {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  color: #eee; font-size: 18px; letter-spacing: .04em; transition: opacity .7s ease, visibility .7s;
}
.dys-enter span { animation: dys-pulse 2.2s ease-in-out infinite; }
.dys-enter.gone { opacity: 0; visibility: hidden; }
@keyframes dys-pulse { 50% { opacity: .45; } }

/* ---------- copied toast ---------- */
.dys-toast {
  position: fixed; bottom: 28px; left: 50%; z-index: 30; display: flex; align-items: center; gap: 11px;
  padding: 10px 18px 10px 10px; border-radius: 16px; max-width: calc(100vw - 32px);
  background: rgba(16,16,18,.82); color: #f2f2f2; font-family: 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  opacity: 0; transform: translate(-50%, 30px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .45s cubic-bezier(.2,1.4,.35,1);
}
.dys-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.dys-toast small { user-select: all; }
.dys-toast .ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #23a55a; color: #fff; }
.dys-toast .ic svg { width: 17px; height: 17px; }
.dys-toast .ic.bad { background: #f23f43; }
.dys-toast.show .ic svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: dys-check .4s .15s ease-out forwards; }
@keyframes dys-check { to { stroke-dashoffset: 0; } }
.dys-toast .tx { display: flex; flex-direction: column; min-width: 0; }
.dys-toast b { font-size: 13.5px; font-weight: 600; }
.dys-toast small { font-size: 11.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------- clickable presence card ---------- */
.dys-box[hidden] { display: none; }
.dys-box.loading { pointer-events: none; }
.dys-box .sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 100%);
  background-size: 200% 100%; animation: dys-shimmer 1.4s ease-in-out infinite;
}
.dys-box .sk.round { width: 100%; height: 100%; border-radius: 50%; }
.dys-box .sk.line { height: 13px; width: 70%; margin: 6px 0; }
.dys-box .sk.line.short { width: 45%; }
@keyframes dys-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dys-box.clickable { cursor: pointer; outline: none; }
.dys-box.clickable:focus-visible { box-shadow: 0 0 0 2px var(--icon); }
.dys-box.clickable:active { transform: scale(.98); }
.dys-box.lifted { opacity: .55; }
.dys-box .more {
  flex: none; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.12); color: #eee; font-style: normal;
}

/* ---------- activity popup ---------- */
.dys-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.dys-modal .shade {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dys-sheet {
  position: relative; width: min(460px, 100%); max-height: min(86vh, 720px); overflow-y: auto;
  padding: 18px; border-radius: 24px; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01)), var(--sheet, rgba(14,14,16,.82));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 40px 120px rgba(0,0,0,.6);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  scrollbar-width: thin; will-change: transform, opacity;
}
.dys.glass .dys-sheet {
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 50%, rgba(255,255,255,.07)), var(--sheet, rgba(14,14,16,.5));
  border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 30px rgba(255,255,255,.06), 0 40px 120px rgba(0,0,0,.55);
}
.dys-act-head { display: flex; align-items: center; gap: 14px; padding: 2px 2px 14px; }
.dys-act-head .pic { position: relative; flex: none; width: 56px; height: 56px; }
.dys-act-head .pic > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dys-act-head .pic .deco { position: absolute; inset: -12%; width: 124%; height: 124%; }
.dys-act-head .dot { position: absolute; right: -1px; bottom: -1px; width: 17px; height: 17px; border-radius: 50%; border: 3.5px solid #141416; }
.dys-act-head .who { flex: 1; min-width: 0; }
.dys-act-head .nm { font-size: 18px; font-weight: 700; color: #f2f2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dys-act-head .st { font-size: 12px; opacity: .6; margin-top: 2px; }
.dys-act-head .x {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.08); color: #ddd; cursor: pointer; transition: background .2s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.dys-act-head .x:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
.dys-act-head .x svg { width: 16px; height: 16px; }
.dys-act-title { font-size: 13px; font-weight: 700; color: #eee; margin: 0 2px 10px; }

.dys-act {
  margin-top: 10px; padding: 12px 14px 14px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
}
.dys-act.empty { font-size: 13px; opacity: .7; text-align: center; padding: 20px; }
.dys-act .lbl { font-size: 12px; font-weight: 700; color: #e8e8e8; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.dys-act .lbl.sp::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: #1ed760; box-shadow: 0 0 8px rgba(30,215,96,.6); }
.dys-act .cs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #eee; }
.dys-act .emoji { width: 22px; height: 22px; object-fit: contain; font-size: 18px; line-height: 22px; }
.dys-act .body { display: flex; gap: 14px; align-items: center; }
.dys-act .art { position: relative; flex: none; width: 88px; height: 88px; border-radius: 12px; background: rgba(255,255,255,.06); }
.dys-act .art > img:first-child { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; display: block; }
.dys-act .art .small { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #1a1a1c; background: #1a1a1c; }
.dys-act .meta { flex: 1; min-width: 0; }
.dys-act .tt { display: block; font-size: 15px; font-weight: 700; color: #f4f4f4; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dys-act a.tt:hover { text-decoration: underline; }
.dys-act .ln { font-size: 12.5px; opacity: .78; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dys-act .ln.dim { opacity: .5; }
.dys-act .elapsed { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 600; color: #3ba55d; }
.dys-act .elapsed svg { width: 17px; height: 17px; }
.dys-act .prog { margin-top: 10px; }
.dys-act .times { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .75; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.dys-act .bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.dys-act .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #f2f2f2; transition: width 1s linear; }

@media (max-width: 560px) {
  .dys-modal { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .dys-sheet { max-height: calc(100dvh - 40px); padding: 16px; border-radius: 22px; }
  .dys-act .art { width: 72px; height: 72px; }
}

/* ---------- liquid glass ---------- */
.dys.glass .dys-card {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.02) 55%, rgba(255,255,255,.06)), var(--card);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(calc(var(--blur) * .5 + 6px)) saturate(1.9) brightness(1.08);
  -webkit-backdrop-filter: blur(calc(var(--blur) * .5 + 6px)) saturate(1.9) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 34px rgba(255,255,255,.07),
    0 30px 90px rgba(0,0,0,.45);
  border-radius: 28px;
}
.dys.glass.refract .dys-card {
  backdrop-filter: url(#dys-refract) blur(calc(var(--blur) * .35 + 3px)) saturate(1.9) brightness(1.08);
}
.dys.glass .dys-card::before, .dys.glass .dys-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
}
/* light that follows the mouse */
.dys.glass .dys-card::before {
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.16), transparent 45%);
}
/* bright rim, like the edge of a lens */
.dys.glass .dys-card::after {
  padding: 1.5px;
  background: linear-gradient(var(--rim, 135deg), rgba(255,255,255,.75), rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 60%, rgba(255,255,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.dys.glass .dys-box {
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 18px rgba(255,255,255,.04);
  backdrop-filter: blur(8px) saturate(1.5); -webkit-backdrop-filter: blur(8px) saturate(1.5);
}
.dys.glass .dys-badge {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.dys.glass .dys-vol {
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8);
}

@media (max-width: 560px) {
  .dys-card { padding: 22px 16px 14px; }
  .dys-head { flex-direction: column; text-align: center; }
  .dys-nameRow { justify-content: center; }
  .dys-widgets { grid-template-columns: 1fr; }
  .dys-avatar { width: 104px; height: 104px; }
  .dys-foot { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dys-card, .dys-name, .dys-enter span { animation: none !important; }
}

/* ---------- phones ---------- */
.dys, .dys * { -webkit-tap-highlight-color: transparent; }
.dys { touch-action: manipulation; overscroll-behavior: none;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.dys-vol { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
.dys-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
.dys-social { min-width: 44px; min-height: 44px; } /* comfortable tap targets */
@media (max-width: 560px) {
  .dys-desc, .dys-sub { overflow-wrap: anywhere; }
  .dys-box { padding: 11px; border-radius: 15px; }
  .dys-box .pic { width: 56px; height: 56px; }
  .dys-box .t { font-size: 16px; }
  .dys-socials { gap: 10px; }
  .dys-vol { height: 42px; }
}

/* ---------- social icons: no hover motion, glossy shine on click ---------- */
.dys-social .shine {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; pointer-events: none; opacity: 0;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 32%, rgba(0,0,0,.4) 42%, #fff 50%, rgba(0,0,0,.4) 58%, transparent 68%) no-repeat;
  background-size: 300% 100%;
}

/* ---------- clickable avatar + name ---------- */
.dys-avatar.clickable { cursor: zoom-in; outline: none; transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
@media (hover: hover) { .dys-avatar.clickable:hover { transform: scale(1.04); } }
.dys-avatar.clickable:focus-visible img.av { box-shadow: 0 0 0 3px var(--icon); }
.dys-name.copyable { cursor: pointer; }
.dys-name.copyable:active { opacity: .75; }

.dys-lightbox { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; cursor: zoom-out; outline: none; }
.dys-lightbox .shade {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dys-lightbox .big {
  position: relative; width: min(78vw, 78vh, 520px); aspect-ratio: 1; object-fit: cover; border-radius: 28px;
  box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14); will-change: transform;
}

/* ---------- resize from the corner ---------- */
.dys-card { display: flex; flex-direction: column; justify-content: center; }
.dys-card > .dys-resize {
  position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; z-index: 3;
  color: #fff; opacity: .3; cursor: nwse-resize; touch-action: none; transition: opacity .2s, transform .2s;
}
.dys-resize svg { width: 100%; height: 100%; display: block; }
.dys-resize:hover, .dys.resizing .dys-resize { opacity: .95; transform: scale(1.1); }
.dys.has-cursor .dys-card > .dys-resize, .dys.has-cursor .dys-card > .dys-resize * { cursor: nwse-resize !important; }
.dys.resizing, .dys.resizing * { user-select: none; -webkit-user-select: none; }
.dys.resizing .dys-card { box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 24px 80px rgba(0,0,0,.4); }
@media (max-width: 560px) { .dys-card > .dys-resize { display: none; } }

/* ---------- copy protection ---------- */
.dys.nocopy, .dys.nocopy * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dys.nocopy img { -webkit-user-drag: none; }

/* ---------- hamburger menu ---------- */
.dys-menu { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); z-index: 6; }
.dys-burger {
  position: relative; display: block; width: 46px; height: 46px; padding: 0; border-radius: 14px; cursor: pointer;
  background: rgba(20,20,20,.35); border: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .25s, transform .35s cubic-bezier(.2,1.5,.4,1);
}
.dys-burger:active { transform: scale(.92); }
.dys.glass .dys-burger {
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8);
}
.dys-burger i {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #e8e8e8;
  transition: transform .5s cubic-bezier(.2,1.4,.3,1), top .5s cubic-bezier(.2,1.4,.3,1), opacity .2s, left .4s, right .4s;
}
.dys-burger i:nth-child(1) { top: 15px; }
.dys-burger i:nth-child(2) { top: 22px; right: 18px; }
.dys-burger i:nth-child(3) { top: 29px; }
@media (hover: hover) { .dys-burger:hover i:nth-child(2) { right: 13px; } }
.dys-menu.open .dys-burger i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.dys-menu.open .dys-burger i:nth-child(2) { opacity: 0; transform: translateX(8px); }
.dys-menu.open .dys-burger i:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.dys-menu-panel {
  position: absolute; top: 56px; right: 0; width: min(292px, calc(100vw - 28px)); padding: 14px; border-radius: 20px;
  color: #e9e9e9; font-family: var(--font); font-size: 13px;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), var(--sheet, rgba(14,14,16,.82));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  transform-origin: calc(100% - 23px) -10px;
  opacity: 0; transform: translateY(-8px) scale(.82); filter: blur(8px); visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.5,0,.8,.3), filter .2s, visibility 0s .24s;
}
.dys-menu.open .dys-menu-panel {
  opacity: 1; transform: none; filter: none; visibility: visible; pointer-events: auto;
  transition: opacity .28s ease, transform .6s cubic-bezier(.16,1.25,.3,1), filter .3s, visibility 0s;
}
.dys-menu-panel > * { opacity: 0; transform: translateY(10px); transition: opacity .15s, transform .15s; }
.dys-menu.open .dys-menu-panel > * { opacity: 1; transform: none; transition: opacity .4s ease, transform .55s cubic-bezier(.2,1.25,.3,1), background .2s; }
.dys-menu.open .dys-menu-panel > :nth-child(1) { transition-delay: .06s; }
.dys-menu.open .dys-menu-panel > :nth-child(2) { transition-delay: .11s; }
.dys-menu.open .dys-menu-panel > :nth-child(3) { transition-delay: .16s; }
.dys-menu.open .dys-menu-panel > :nth-child(4) { transition-delay: .21s; }
.dys-menu.open .dys-menu-panel > :nth-child(5) { transition-delay: .26s; }

.dys-menu-panel .ttl { font-size: 14px; font-weight: 700; color: #fff; margin: 2px 2px 12px; }
.dys-menu-panel .row {
  display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); color: inherit; font: inherit;
}
.dys-menu-panel .lab { font-size: 12px; font-weight: 700; color: #f0f0f0; margin-bottom: 10px; }
.dys-menu-panel .spd { display: flex; align-items: center; gap: 10px; }
.dys-menu-panel .pp {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; transition: background .2s, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.dys-menu-panel .pp:hover { background: rgba(255,255,255,.2); }
.dys-menu-panel .pp:active { transform: scale(.88); }
.dys-menu-panel .pp svg { width: 15px; height: 15px; }
.dys-menu-panel .val { flex: none; width: 52px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.dys-menu-panel input[type=range] {
  flex: 1; min-width: 0; height: 22px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.dys-menu-panel input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, #f2f2f2 var(--p, 50%), rgba(255,255,255,.16) var(--p, 50%));
}
.dys-menu-panel input[type=range]::-moz-range-track { height: 5px; border-radius: 5px; background: rgba(255,255,255,.16); }
.dys-menu-panel input[type=range]::-moz-range-progress { height: 5px; border-radius: 5px; background: #f2f2f2; }
.dys-menu-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .2s cubic-bezier(.2,1.6,.4,1);
}
.dys-menu-panel input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.dys-menu-panel input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
.dys-menu-panel .chips { display: flex; gap: 5px; margin-top: 10px; }
.dys-menu-panel .chips button {
  flex: 1; padding: 6px 0; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 11px;
  background: rgba(255,255,255,.07); color: #cfcfcf; transition: background .2s, color .2s, transform .25s cubic-bezier(.2,1.5,.4,1);
}
.dys-menu-panel .chips button:hover { background: rgba(255,255,255,.14); }
.dys-menu-panel .chips button:active { transform: scale(.93); }
.dys-menu-panel .chips button.on { background: #f2f2f2; color: #111; font-weight: 700; }
.dys-menu-panel .tog { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.dys-menu-panel .tog .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dys-menu-panel .tog b { font-size: 12.5px; font-weight: 700; color: #f0f0f0; }
.dys-menu-panel .tog small { font-size: 11px; opacity: .55; }
.dys-menu-panel .sw { flex: none; position: relative; width: 40px; height: 23px; border-radius: 23px; background: rgba(255,255,255,.16); transition: background .3s; }
.dys-menu-panel .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .45s cubic-bezier(.2,1.5,.35,1);
}
.dys-menu-panel .tog[aria-checked=true] .sw { background: #23a55a; }
.dys-menu-panel .tog[aria-checked=true] .sw::after { transform: translateX(17px); }
.dys-menu-panel .act { cursor: pointer; text-align: center; font-size: 12.5px; color: #dcdcdc; }
.dys-menu-panel .act:hover, .dys-menu-panel .tog:hover { background: rgba(255,255,255,.09); }
.dys.has-cursor .dys-menu-panel input[type=range] { cursor: var(--cursor), pointer !important; }

/* ---------- v7: shine that flashes then fades back smoothly ---------- */
/* base + keyframes use the same filter list (brightness + drop-shadow) so the browser can blend between them */
.dys-social img, .dys-social svg { filter: brightness(1) drop-shadow(0 0 0 transparent); }
.dys-socials.glow .dys-social img, .dys-socials.glow .dys-social svg { filter: brightness(1) drop-shadow(0 0 7px var(--iconGlow)); }
.dys-social.shining .shine { animation: dys-shine .95s cubic-bezier(.3,.1,.2,1); }
.dys-social.shining img, .dys-social.shining svg { animation: dys-gleam .95s cubic-bezier(.2,.7,.2,1); }
.dys-socials.glow .dys-social.shining img, .dys-socials.glow .dys-social.shining svg { animation-name: dys-gleam-glow; }
@keyframes dys-shine {
  0% { opacity: 0; background-position: 130% 0; }
  18% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}
@keyframes dys-gleam {
  0% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  22% { filter: brightness(1.9) drop-shadow(0 0 14px var(--iconGlow)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
@keyframes dys-gleam-glow {
  0% { filter: brightness(1) drop-shadow(0 0 7px var(--iconGlow)); }
  22% { filter: brightness(1.9) drop-shadow(0 0 16px var(--iconGlow)); }
  100% { filter: brightness(1) drop-shadow(0 0 7px var(--iconGlow)); }
}

/* ---------- v7: content wrapper (zooms with the card) ---------- */
.dys-inner { width: 100%; }

/* ---------- v7: compact layout when the card is dragged small ---------- */
.dys-box .meta { max-width: 100%; transition: max-width .5s cubic-bezier(.2,.9,.3,1), opacity .3s ease, transform .5s cubic-bezier(.2,.9,.3,1), flex-grow .5s; }
.dys-box .t, .dys-box .counts { max-height: 2.2em; transition: max-height .45s cubic-bezier(.2,.9,.3,1), opacity .3s ease, margin .45s; }
.dys-box .pic { transition: width .45s cubic-bezier(.25,.8,.25,1), height .45s cubic-bezier(.25,.8,.25,1); }
.dys-box .cnt {
  display: none; flex: none; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px; font-size: 13px; font-weight: 700; font-style: normal;
  background: rgba(255,255,255,.14); color: #f2f2f2; animation: dys-cnt .5s cubic-bezier(.2,1.5,.4,1) backwards;
}
@keyframes dys-cnt { from { opacity: 0; transform: scale(.4); } }
.dys-card.compact .dys-widgets { gap: 10px; }
.dys-card.compact .dys-box { justify-content: center; gap: 9px; padding: 10px; }
.dys-card.compact .dys-box .act, .dys-card.compact .dys-box .tag, .dys-card.compact .dys-box .more { display: none; }
.dys-card.compact .dys-box .cnt { display: inline-flex; }
/* presence: text slides away, leaving the avatar and the activity count */
.dys-card.compact .dys-box.clickable .meta { flex: 0 0 0; max-width: 0; opacity: 0; transform: translateX(-14px); overflow: hidden; }
/* server: icon + Join */
.dys-card.compact .dys-box:not(.clickable) .t, .dys-card.compact .dys-box:not(.clickable) .counts { max-height: 0; opacity: 0; margin: 0; overflow: hidden; }
.dys-card.compact .dys-box:not(.clickable) .meta { flex: 0 1 auto; }
.dys-card.compact .dys-box:not(.clickable) .pic { width: 50px; height: 50px; }
.dys-card.compact .dys-join { margin-top: 0; }
.dys-card.compact .dys-head { gap: 14px; }
.dys-card.compact .dys-avatar { width: 100px; height: 100px; }
.dys-avatar { transition: width .45s cubic-bezier(.25,.8,.25,1), height .45s cubic-bezier(.25,.8,.25,1), transform .35s cubic-bezier(.2,1.4,.4,1); }

/* ---------- v7: volume box, icon dead-centre ---------- */
.dys-vol { gap: 0; padding: 0; height: 46px; min-width: 46px; justify-content: flex-start; }
.dys-vol button { width: 46px; height: 46px; flex: none; }
.dys-vol svg { width: 21px; height: 21px; display: block; }
.dys-vol input {
  width: 0; height: 22px; margin: 0; padding: 0; opacity: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: width .35s cubic-bezier(.2,1.1,.3,1), opacity .25s, margin .35s;
}
.dys-vol:hover input, .dys-vol:focus-within input { width: 100px; opacity: 1; margin: 0 14px 0 0; }
.dys-vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
.dys-vol input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
.dys-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.dys-vol input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.dys-vol .song { margin: 0; }
.dys-vol:hover .song:not(:empty) { margin-right: 12px; }
@media (max-width: 560px) {
  .dys-vol { height: 44px; min-width: 44px; }
  .dys-vol button { width: 44px; height: 44px; }
}

/* ---------- v7: phone menu (pause + speeds only) ---------- */
.dys-menu-panel .spd.lite { justify-content: space-between; }
.dys-menu-panel .spd.lite .val { width: auto; font-size: 13px; }

/* ---------- banner: top of the card, fading into it ---------- */
.dys-card > .dys-banner {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; overflow: hidden;
  height: calc(var(--bannerH, 180px) * var(--k, 1));
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--bannerSolid, 31%), rgba(0,0,0,.55) calc(var(--bannerSolid, 31%) + (100% - var(--bannerSolid, 31%)) * .45), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 var(--bannerSolid, 31%), rgba(0,0,0,.55) calc(var(--bannerSolid, 31%) + (100% - var(--bannerSolid, 31%)) * .45), transparent 100%);
  animation: dys-banner-in 1s cubic-bezier(.2,.8,.2,1) both;
}
.dys-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
@keyframes dys-banner-in { from { opacity: 0; } }
.dys-card.has-banner { padding-top: calc(var(--bannerH, 180px) * var(--k, 1) * .56); }
/* a soft shadow behind the avatar so it lifts off the banner */
.dys-card.has-banner .dys-avatar img.av { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 4px var(--box); }

/* ---------- layouts ---------- */
.dys.layout-centered .dys-head, .dys.layout-minimal .dys-head { flex-direction: column; text-align: center; gap: 12px; }
.dys.layout-centered .dys-nameRow, .dys.layout-minimal .dys-nameRow { justify-content: center; }
.dys.layout-centered .dys-widgets { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
.dys.layout-centered .dys-foot, .dys.layout-minimal .dys-foot { justify-content: center; }
.dys.layout-minimal .dys-desc { max-width: 380px; margin-left: auto; margin-right: auto; }
.dys.layout-centered .dys-card.has-banner, .dys.layout-minimal .dys-card.has-banner { padding-top: calc(var(--bannerH, 180px) * var(--k, 1) * .5); }

/* ---------- phones: lighter blur (blur cost grows with radius and gets redrawn as things move) ---------- */
@media (max-width: 700px), (pointer: coarse) {
  .dys-card { backdrop-filter: blur(min(var(--blur), 12px)); -webkit-backdrop-filter: blur(min(var(--blur), 12px)); will-change: transform; }
  .dys.glass .dys-card { backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); }
  /* nested blurred boxes inside a blurred card are the most expensive thing on mobile GPUs */
  .dys .dys-box, .dys.glass .dys-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dys-enter { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .dys-vol, .dys-burger, .dys.glass .dys-vol, .dys.glass .dys-burger { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* ---------- visitor controls: dark frosted chrome that reads on ANY background (incl. bright/pastel pages) ---------- */
.dys .dys-vol, .dys.glass .dys-vol, .dys .dys-burger, .dys.glass .dys-burger {
  background: rgba(14,14,18,.58); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.dys .dys-vol button, .dys .dys-burger i { color: #f2f2f2; }
.dys .dys-burger i { background: #f2f2f2; }
.dys .dys-vol .song { color: #eee; }
.dys .dys-menu-panel, .dys.glass .dys-menu-panel, .dys .dys-sheet, .dys.glass .dys-sheet {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(16,16,20,.88);
  border-color: rgba(255,255,255,.14); color: #ececf1;
}
.dys .dys-enter { background: rgba(10,10,14,.5); }
.dys .dys-enter span { text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* names inside the status / server boxes follow the theme instead of fixed white */
.dys-box .t { color: var(--strong, #eee); }

/* ---------- automatic contrast help (only switched on when the page needs it) ---------- */
.dys.lowc .dys-name, .dys.lowc .dys-desc, .dys.lowc .dys-sub, .dys.lowc .dys-foot,
.dys.lowc .dys-box .t, .dys.lowc .dys-box .s, .dys.lowc .dys-box .counts, .dys.lowc .dys-box .tag {
  text-shadow: 0 0 1px var(--halo), 0 1px 3px var(--halo);
}
.dys.lowc .dys-name.glow { text-shadow: 0 0 1px var(--halo), 0 1px 3px var(--halo), 0 0 16px var(--textGlow); }
.dys.lowc .dys-sub, .dys.lowc .dys-foot, .dys.lowc .dys-box .s, .dys.lowc .dys-box .counts { opacity: .95; }
.dys.lowc .dys-box .tag { opacity: .7; }
.dys.lowc .dys-box { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,0,0,.08); }
/* white icons on a light card (or dark icons on a dark one) get a thin outline */
.dys.lowc-icons .dys-social, .dys.lowc-icons .dys-badge, .dys.lowc-icons .dys-foot svg {
  filter: drop-shadow(0 0 1px var(--ihalo)) drop-shadow(0 1px 2px var(--ihalo));
}
.dys.lowc-icons .dys-badge { border-color: rgba(0,0,0,.12); }

/* ---------- live updates: the page blurs out, rebuilds and comes back into focus ---------- */
.dys.dys-swap-out .dys-card { filter: blur(10px) saturate(.85); opacity: .5; transition: filter .34s cubic-bezier(.4,0,.6,1), opacity .34s; }
.dys.dys-swap-out .dys-avatar img.av { filter: blur(18px); transform: scale(.92); transition: filter .3s, transform .34s cubic-bezier(.4,0,.6,1); }
.dys.dys-swap-out .dys-stage { filter: blur(8px); opacity: .55; transition: filter .34s, opacity .34s; }
.dys.dys-live .dys-card { animation: none; transition: filter .6s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.dys.dys-live .dys-avatar img.av { transition: filter .8s .14s cubic-bezier(.2,.8,.2,1), transform .8s .14s cubic-bezier(.2,1.3,.4,1); }
.dys.dys-live .dys-stage { transition: filter .7s, opacity .6s; }
.dys.dys-swap-in .dys-card { filter: blur(10px) saturate(.85); opacity: .5; transition: none; }
.dys.dys-swap-in .dys-avatar img.av { filter: blur(18px); transform: scale(.92); transition: none; }
.dys.dys-swap-in .dys-stage { filter: blur(8px); opacity: .55; transition: none; }

/* text being backspaced and retyped (status, description, small text) */
.dys-caret {
  display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -.14em;
  background: currentColor; border-radius: 1px; animation: dys-blink .8s steps(1) infinite;
}
.retyping .dys-caret { box-shadow: 0 0 6px currentColor; }

/* status dot fades to its new colour, new activity art eases in, view count ticks */
.dys-box .dot { transition: background-color .6s ease; }
.dys-box .act.fresh { animation: dys-act-in .55s cubic-bezier(.2,1.3,.3,1); }
@keyframes dys-act-in { from { opacity: 0; transform: scale(.7) rotate(-6deg); filter: blur(6px); } }
.dys-views.bump { animation: dys-bump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes dys-bump { 40% { transform: translateY(-3px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .dys.dys-swap-out .dys-card, .dys.dys-swap-out .dys-avatar img.av, .dys.dys-swap-out .dys-stage,
  .dys.dys-swap-in .dys-card, .dys.dys-swap-in .dys-avatar img.av, .dys.dys-swap-in .dys-stage { filter: none; opacity: 1; transform: none; }
  .dys-box .act.fresh, .dys-views.bump { animation: none; }
}
/* ---------- activity popup: new activities swipe down in, others glide to make room ---------- */
.dys-act.swipe-in { animation: dys-swipe .62s cubic-bezier(.2,1.05,.3,1) both; }
@keyframes dys-swipe {
  from { opacity: 0; transform: translateY(-28px) scale(.97); clip-path: inset(0 0 100% 0 round 14px); filter: blur(4px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
}
.dys-act .art.fresh img { animation: dys-act-in .55s cubic-bezier(.2,1.3,.3,1); }
.dys-act-head .dot { transition: background-color .6s ease; }
/* activity art on the page slides down into place too */
@keyframes dys-act-in { from { opacity: 0; transform: translateY(-12px) scale(.85); filter: blur(6px); } }

/* ---------- profile picture changes: blur out, swap, back into focus ---------- */
.dys-avatar img.av { transition: filter .5s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,1.3,.4,1); }
.dys-avatar img.av.pfp-out { filter: blur(16px) brightness(1.15); transform: scale(.9); transition-duration: .3s, .3s; }
.dys-box .pic > img.fresh-pfp { animation: dys-pfp-in .7s cubic-bezier(.2,.8,.2,1); }
@keyframes dys-pfp-in { from { filter: blur(12px); transform: scale(.9); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .dys-act.swipe-in, .dys-act .art.fresh img, .dys-box .pic > img.fresh-pfp { animation: none; }
  .dys-avatar img.av.pfp-out { filter: none; transform: none; }
}
/* ---------- owner-only "edit page" shortcut ---------- */
.dys-edit {
  position: fixed; z-index: 6; left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 12px;
  background: rgba(14,14,18,.58); border: 1px solid rgba(255,255,255,.14); color: #f2f2f2; text-decoration: none;
  font: 600 12.5px 'Space Grotesk', system-ui, sans-serif; letter-spacing: .01em;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .3s cubic-bezier(.2,1.4,.4,1), border-color .2s, box-shadow .3s;
  animation: dys-rise .7s .4s cubic-bezier(.2,.8,.2,1) backwards;
}
.dys-edit svg { width: 15px; height: 15px; }
.dys-edit:hover { border-color: rgba(183,124,255,.55); box-shadow: 0 0 18px rgba(183,124,255,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.dys-edit:active { transform: scale(.96); }
.dys.entering .dys-edit { opacity: 0; pointer-events: none; }
.dys-edit:focus-visible, .dys-burger:focus-visible, .dys-vol button:focus-visible { outline: 2px solid #b77cff; outline-offset: 3px; }