.about-button { border-radius: 4px; transition: opacity 150ms; }
.about-button[aria-expanded="true"] { visibility: hidden; }
#about-dialog {
  position: fixed; inset: auto auto 23px 26px; margin: 0; z-index: 50;
  width: min(460px, calc(100vw - 52px)); max-width: none;
  height: auto; max-height: min(780px, calc(100svh - 130px));
  padding: 0; border: 1px solid #ffffff16; border-radius: 12px;
  background: #101010; color: #ddd; overflow: hidden;
  box-shadow: 0 12px 45px #00000016;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
#about-dialog[open] { display: flex; flex-direction: column; }
.about-panel-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 17px 21px 13px 28px; }
.about-panel-header > span { color: #999; font-size: 10px; font-weight: 400; letter-spacing: 1px; }
.about-close { display: grid; place-items: center; padding: 5px; width: 28px; height: 28px; border-radius: 4px; color: #bdbdbd; }
.about-close:hover { opacity: 1; color: #fff; background: #ffffff12; }
.about-close svg { width: 18px; height: 18px; }
.about-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: #555 transparent; outline-offset: -5px !important; }
.about-content { padding: 1px 28px 28px; }
#about-dialog h2 { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.3; letter-spacing: .1px; color: #f4f4f4; }
#about-dialog h2 span { margin-left: 7px; font-size: 15px; font-weight: 400; letter-spacing: .3px; }
#about-dialog p { margin: 0; font-size: 12px; line-height: 1.75; font-weight: 400; color: #c3c3c3; overflow-wrap: anywhere; }
#about-dialog .about-identity > p { margin-top: 7px; font-size: 11px; color: #a9a9a9; }
.about-section { margin-top: 24px; }
.about-section h3 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; font-size: 11px; font-weight: 500; color: #f0f0f0; }
.about-section h3 span { font-size: 9px; font-weight: 400; letter-spacing: 1.1px; color: #838383; }
.about-entry + .about-entry { margin-top: 15px; }
.about-entry h4 { margin: 0; font-size: 12px; line-height: 1.7; font-weight: 500; color: #e8e8e8; }
.about-entry h4 span { display: block; font-size: 11px; font-weight: 400; color: #a9a9a9; }
#about-dialog .about-date { margin: 2px 0 4px; font-size: 10px; letter-spacing: .3px; color: #858585; }
#about-dialog .about-role { margin-bottom: 5px; color: #e0e0e0; font-size: 11px; }
.about-divider { display: inline-block; padding-inline: 4px; color: #626262; }
.about-skills .about-entry h4 { color: #d3d3d3; font-size: 11px; }
.about-skills .about-entry p { color: #a9a9a9 !important; font-size: 11px !important; }
@media (max-width: 760px) {
  #about-dialog { left: 18px; bottom: 18px; width: calc(100vw - 36px); max-height: calc(100svh - 125px); border-radius: 10px; }
  .about-panel-header { padding: 13px 15px 11px 23px; }
  .about-content { padding: 0 23px 25px; }
  #about-dialog h2 { font-size: 23px; }
  #about-dialog h2 span { font-size: 13px; }
}