/* Persistent portfolio link, outside the app's hash-routed view. */
.personal-home {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 22px;
  background: var(--sign);
  color: var(--on-sign);
  box-shadow: 0 4px 16px rgba(11, 21, 36, .2);
  text-decoration: none;
  transition: width .22s ease, background-color .22s ease;
}
.personal-home__icon { width: 20px; height: 20px; flex: 0 0 20px; }
.personal-home__label {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
.personal-home:hover,
.personal-home:focus-visible { width: 166px; background: var(--sign-hi); }
.personal-home:hover .personal-home__label,
.personal-home:focus-visible .personal-home__label { opacity: 1; }
.personal-home:focus-visible { outline: 3px solid var(--warn); outline-offset: 3px; }
@media (max-width: 899px) {
  .personal-home { right: max(16px, env(safe-area-inset-right, 0px)); }
  body[data-shell="app"] .personal-home {
    bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .personal-home, .personal-home__label { transition: none; }
}