:root {
  /* Use the platform UI font; keep this stack system-first. */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#000;
  background:#fff;
  color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; }
.page { width:200px; max-width:calc(100% - 40px); margin:0 auto; padding:clamp(32px,12.44vh,78px) 0 40px; }
.avatar { display:grid; place-items:center; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:#cfffd0; color:#17c565; }
#monogram { font-size:100px; font-weight:700; line-height:1; }
.avatar img { width:100%; height:100%; object-fit:cover; }
[hidden] { display:none !important; }
h1 { margin:12px 0 18px; font-size:20px; line-height:28px; font-weight:700; text-align:center; }
.status { margin:0; font-size:16px; line-height:28px; }
.status>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
dt,dd { margin:0; }
dd { text-align:right; overflow-wrap:anywhere; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
noscript p { font-size:14px; line-height:1.5; }
a { color:inherit; }
a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }