.aboutme-dialog {
    --cyan: #71efff;
    --pink: #ff58c6;
    box-sizing: border-box;
    width: min(660px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 40px));
    padding: 0;
    overflow: auto;
    color: #edf5fa;
    border: 1px solid #71efff99;
    border-radius: 12px;
    background: #11151e;
    box-shadow: 0 0 0 5px #71efff08, 0 0 38px #25c9e330, 0 28px 100px #000b;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
}
.aboutme-dialog::backdrop { background: #060910c9; backdrop-filter: blur(7px); }
.aboutme-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px 22px;
    border-bottom: 1px solid #71efff26;
    background: #71efff04;
}
.aboutme-location { display: flex; align-items: center; gap: 10px; font: 11px/1.4 Consolas, monospace; letter-spacing: .17em; color: #9cadbe; }
.aboutme-location::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.aboutme-close { width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff28; border-radius: 5px; color: #c6d7e6; background: #ffffff04; font: 25px/1 sans-serif; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.aboutme-close:hover { color: #fff; border-color: var(--pink); background: #ff58c617; }
.aboutme-close:focus-visible, .aboutme-return:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.aboutme-content { padding: 34px 38px 30px; background: radial-gradient(ellipse at 100% 0%, #ff58c60c, transparent 65%); }
.aboutme-kicker { margin: 0 0 12px; color: var(--pink); font: 11px/1.5 Consolas, monospace; letter-spacing: .2em; }
.aboutme-title { margin: 0 0 30px; font-size: clamp(40px, 8vw, 64px); font-weight: 300; letter-spacing: .035em; line-height: 1; }
.aboutme-title span { color: transparent; -webkit-text-stroke: 1px var(--cyan); text-shadow: 0 0 17px #71efff38; }
.aboutme-identity { display: flex; align-items: center; gap: 17px; margin-bottom: 25px; }
.aboutme-avatar { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border: 1px solid #ff58c665; border-radius: 9px; background: #ff58c609; font-size: 32px; font-weight: 300; color: #ffb8e8; box-shadow: inset 0 0 18px #ff58c609; }
.aboutme-name { margin: 0 0 4px; font-size: 25px; font-weight: 400; }
.aboutme-welcome { margin: 0; color: #8f9eaf; font-size: 13px; }
.aboutme-bio { margin: 0; max-width: 49ch; color: #b4c1d0; font: 16px/1.85 'Segoe UI', sans-serif; }
.aboutme-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.aboutme-tags li { padding: 7px 10px; border: 1px solid #71efff25; border-radius: 3px; color: #9dbfcb; font: 10px/1.4 Consolas, monospace; letter-spacing: .12em; }
.aboutme-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 38px; border-top: 1px solid #ffffff0d; }
.aboutme-footnote { color: #647589; font: 10px/1.5 Consolas, monospace; letter-spacing: .08em; }
.aboutme-return { padding: 11px 17px; border: 1px solid #71efff65; border-radius: 4px; color: var(--cyan); background: #71efff08; cursor: pointer; font: 11px/1.5 Consolas, monospace; letter-spacing: .08em; }
.aboutme-return:hover { background: #71efff18; box-shadow: 0 0 17px #71efff15; }
.aboutme-keyboard { position: fixed; left: -10000px; top: 12px; z-index: 5; }
.aboutme-keyboard:focus { left: 50%; transform: translateX(-50%); padding: 12px 20px; border: 1px solid #71efff; background: #11151e; color: #71efff; }
@media (max-width: 480px) {
    .aboutme-header { padding: 12px 17px; }
    .aboutme-location { font-size: 9px; letter-spacing: .1em; }
    .aboutme-content { padding: 27px 23px; }
    .aboutme-title { margin-bottom: 25px; }
    .aboutme-footer { padding: 18px 23px; gap: 12px; }
    .aboutme-footnote { max-width: 100px; }
    .aboutme-return { padding: 10px 12px; font-size: 10px; }
}