.about-dialog, .about-closing-layer {
  --about-close-duration: 300ms;
  --about-close-easing: cubic-bezier(0.2, 0.7, 0.16, 1);
}
.about-dialog {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 28px 28px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: #191b1c;
  color: #f4f1ea;
  box-shadow: 0 24px 80px #0006;
  font-family: inherit;
  letter-spacing: 0;
}
.about-dialog[open] { animation: about-enter 180ms ease-out; }
.about-dialog::backdrop { background: #0009; backdrop-filter: blur(2px); }
.about-dialog.is-closing { animation: about-exit var(--about-close-duration) var(--about-close-easing) forwards; }
.about-closing-layer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none; }
.about-closing-layer .about-dialog { position: relative; margin: 0; }
.about-closing-backdrop { position: absolute; inset: 0; background: #0009; backdrop-filter: blur(2px); animation: about-backdrop-exit var(--about-close-duration) var(--about-close-easing) forwards; }
.about-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.about-header > span { font-size: 11px; font-weight: 600; color: #b0b2b3; }
.about-icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #bfc1c2;
  cursor: pointer;
}
.about-icon-button:hover { background: #ffffff0d; color: #fff; }
.about-icon-button:focus-visible { outline: 2px solid #f37f22; outline-offset: 3px; }
.about-icon-button svg { width: 20px; height: 20px; }
.about-icon-button span { display: inline-flex; }
.about-icon-button [hidden] { display: none; }
.about-icon-button:disabled { cursor: wait; }
.about-identity { display: grid; justify-items: center; padding: 20px 0 32px; gap: 20px; }
.about-avatar { display: block; width: 136px; height: 136px; object-fit: contain; border-radius: 6px; background: #eee; }
.about-avatar-button { display: block; width: 136px; height: 136px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.about-avatar-button:focus-visible { outline: 2px solid #f37f22; outline-offset: 4px; }
.about-identity h2 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; text-align: center; }
.about-contact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid #ffffff1a; }
.about-email { display: grid; gap: 9px; min-width: 0; }
.about-label { font-size: 10px; font-weight: 600; color: #93989b; }
.about-email > span:last-child { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.about-copy { background: #ffffff09; border: 1px solid #ffffff15; color: #ddd; }
.about-copy.is-copied { color: #f6a55d; background: #f37f2214; border-color: #f37f2240; }
.about-copy-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.about-copy-status.is-error { position: static; width: auto; height: auto; margin: 14px 0 0; clip-path: none; color: #ffb1a1; font-size: 12px; line-height: 1.6; }
@keyframes about-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes about-exit {
  from { opacity: var(--about-close-opacity, 1); transform: var(--about-close-transform, none); }
  to { opacity: 0; transform: var(--about-close-transform, none); }
}
@keyframes about-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 400px) { .about-dialog { padding: 20px; } .about-contact { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .about-dialog[open] { animation: none; }
  .about-dialog.is-closing, .about-closing-backdrop { animation-duration: 1ms; }
}