/* New-version hint. The current page remains usable until the visitor refreshes. */
.topbar > .site-brand-anchor { position:relative; display:inline-flex; flex:none; align-items:center; min-width:0; }
.site-brand-anchor > .brand { margin:0; }
.topbar .site-update { position:absolute; display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:calc(100vw - 36px); min-height:22px; margin:0; padding:3px 0; border:0; border-radius:4px; background:none; color:#8bd4ac; font:400 11px/1.4 Consolas,"Cascadia Code",monospace; letter-spacing:0; white-space:nowrap; cursor:pointer; animation:site-update-arrive 260ms cubic-bezier(.2,.8,.2,1) both; transition:color 140ms ease; }
.topbar .site-update[hidden] { display:none!important; }
.topbar .site-update:hover { color:#b5efce; }
.topbar .site-update:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
.site-update-dot { position:relative; width:5px; height:5px; flex:none; border-radius:50%; background:currentColor; }
.site-update-dot::after { content:""; position:absolute; inset:-4px; border:1px solid currentColor; border-radius:50%; opacity:0; animation:site-update-signal 650ms ease-out 150ms both; }
.site-update-shortcut { margin-left:3px; padding:0; border:0; color:currentColor; font:inherit; font-size:9px; opacity:.58; }
.topbar .site-update-side { right:calc(100% + 12px); top:50%; translate:0 -50%; }
.topbar .site-update-below { left:0; top:calc(100% + 6px); }
.topbar.has-site-update-row { flex-wrap:wrap; row-gap:5px; }
.topbar > .site-update-row { position:static; flex-basis:100%; justify-content:flex-start; align-self:flex-start; margin-top:0; }
.site-update-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html[data-theme="light"] .topbar .site-update { color:#216544; }
html[data-theme="light"] .topbar .site-update:hover { color:#123f2a; }
@keyframes site-update-arrive { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes site-update-signal { 0% { opacity:0; transform:scale(.6); } 20% { opacity:.45; } 100% { opacity:0; transform:scale(1.35); } }
@media(max-width:760px) {
  .home-page .topbar > .site-brand-anchor,.portfolio-page .topbar > .site-brand-anchor { grid-row:1; grid-column:1; justify-self:start; }
  .home-page .topbar.has-site-update-row,.portfolio-page .topbar.has-site-update-row { row-gap:10px; }
  .home-page .topbar > .site-update-row,.portfolio-page .topbar > .site-update-row { grid-row:3; grid-column:1/-1; justify-self:start; min-height:24px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .topbar .site-update,.site-update-dot::after { animation:none; transition:none; }
}