.about-dialog { margin: auto; width: min(1050px, 94vw); max-height: 90vh; max-height: 90dvh; overflow-y: auto; padding: 24px; border: 0; border-radius: 14px; color: var(--text-main); background: var(--bg-color); box-shadow: 0 24px 80px rgba(15, 23, 42, .3); }
.about-dialog::backdrop { background: rgba(15, 23, 42, .8); }
.about-dialog-toolbar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.about-dialog-toolbar button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; color: var(--navy-dark); background: var(--bg-accent); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.about-dialog-toolbar button:hover { color: white; background: var(--primary-red); border-color: var(--primary-red); }
.about-dialog-toolbar button:focus-visible { outline: 3px solid var(--trust-blue); outline-offset: 4px; }
.about-dialog-toolbar button svg { display: block; pointer-events: none; }
.about-dialog .about-tentacles { padding: 0 0 16px; border: 0; }
.about-dialog .container { width: 100%; padding: 0; }
.about-dialog .about-layout { gap: 32px; }
body.about-open { overflow: hidden; }
@media (max-width: 768px) { .about-dialog { padding: 20px; } .about-dialog h2 { font-size: 1.8rem; } .about-dialog .profile-photo { max-width: 260px; } }