.projects-dialog { width: min(800px, calc(100vw - 32px)); }
.projects-dialog .aboutme-header { position: sticky; top: 0; z-index: 1; background: #131923; }
.projects-dialog .aboutme-title { font-size: clamp(34px, 7vw, 54px); margin-bottom: 28px; }
.project-card { padding: 23px; margin-top: 22px; border: 1px solid #71efff26; border-radius: 8px; background: #080e1680; }
.project-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.project-number { padding-top: 3px; font: 12px/1.5 Consolas, monospace; color: #ff82d4; }
.project-heading h2 { margin: 0 0 6px; font-size: 22px; font-weight: 400; line-height: 1.25; }
.project-status { color: #92a9ba; font: 10px/1.5 Consolas, monospace; letter-spacing: .12em; }
.project-media { width: 100%; aspect-ratio: 16 / 9; display: block; box-sizing: border-box; border: 1px solid #71efff26; border-radius: 5px; background: #05070c; }
.project-description { margin: 18px 0 0; color: #b4c1d0; font: 15px/1.8 'Segoe UI', sans-serif; }
.project-drive-link { display: inline-block; margin-top: 11px; color: #8ed9e4; text-decoration: none; font: 11px/1.5 Consolas, monospace; }
.project-drive-link:hover { color: #fff; text-decoration: underline; }
.project-drive-link:focus-visible { outline: 2px solid #71efff; outline-offset: 4px; }
@media(max-width:480px) {
  .projects-dialog .aboutme-content { padding: 25px 18px; }
  .project-card { padding: 15px; }
  .project-heading h2 { font-size: 19px; }
  .project-description { font-size: 14px; }
}