.esa-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:4rem;padding-inline:max(3.25rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));border-bottom:1px solid var(--navy-600);background:var(--navy-900);color:var(--cream)}
.esa-centre{grid-column:2;display:grid;place-items:center;min-width:44px;min-height:44px}
.esa-centre img{display:block;width:4rem;height:3rem;object-fit:contain}
.esa-top-actions{display:flex;justify-content:end;align-items:center;gap:.5rem;font-size:.875rem}
.esa-top-actions a,.esa-top-actions button{display:inline-flex;align-items:center;min-height:44px;max-width:100%;color:inherit}
.esa-top-actions button{background:none;border:1px solid currentColor;border-radius:.375rem;padding-inline:.5rem;min-width:44px;cursor:pointer}
:root[data-mode=light]{color-scheme:light}
:root[data-mode=dark]{color-scheme:dark}
@media(prefers-color-scheme:light){:root:not([data-mode]){color-scheme:light}}
:root:where([data-mode=light]) .page,
:root:where([data-mode=light]) .foot{
  --body-ink:var(--cream);--label:var(--cream);--accent:var(--gold-300);--accent-hi:var(--gold-300);
  --gold-100:var(--gold-300);--muted:var(--cream)
}
:root:where([data-mode=light]) .amb{background:var(--navy-900)}
:root:where([data-mode=light]) :is(.panel,.card,.event-row,.home-feedback){background:var(--navy-800)}
:root:where([data-mode=light]) :is(.meta,.kicker){color:var(--cream)}
:root:where([data-mode=light]) :is(h1,h2,h3){text-shadow:none}
:root:where([data-mode=light]) .btn{background:var(--gold-300);color:var(--navy-800)}
:root:where([data-mode=light]) .btn.quiet{background:var(--navy-800);color:var(--gold-300)}
@media(prefers-color-scheme:light){
  :root:where(:not([data-mode])) :is(.page,.foot){--body-ink:var(--cream);--label:var(--cream);--accent:var(--gold-300);--accent-hi:var(--gold-300);--gold-100:var(--gold-300);--muted:var(--cream)}
  :root:where(:not([data-mode])) .amb{background:var(--navy-900)}
  :root:where(:not([data-mode])) :is(.panel,.card,.event-row,.home-feedback){background:var(--navy-800)}
  :root:where(:not([data-mode])) :is(.meta,.kicker){color:var(--cream)}
  :root:where(:not([data-mode])) :is(h1,h2,h3){text-shadow:none}
  :root:where(:not([data-mode])) .btn{background:var(--gold-300);color:var(--navy-800)}
  :root:where(:not([data-mode])) .btn.quiet{background:var(--navy-800);color:var(--gold-300)}
}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:.18s}
  [data-transition=fade-up] .page>section{animation:preset-section-rise .45s ease-out both}
  [data-transition=slide] .page>section{animation:preset-section-slide .45s ease-out both}
  [data-transition=image-reveal] .page>section>img{animation:preset-section-image .45s ease-out both}
}
@keyframes preset-section-rise{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@keyframes preset-section-slide{from{opacity:0;transform:translateX(-.5rem)}to{opacity:1;transform:none}}
@keyframes preset-section-image{from{opacity:0}to{opacity:1}}
:root[data-mode=light] .esa-top{background:var(--paper);color:var(--ink);border-color:var(--muted)}
@media(prefers-color-scheme:light){:root:not([data-mode]) .esa-top{background:var(--paper);color:var(--ink);border-color:var(--muted)}}
@media(max-width:700px){
  .esa-top{grid-template-columns:1fr 44px minmax(0,1fr);padding-right:.5rem}
  .esa-centre img{width:44px}
  .esa-top-actions a{line-height:1.1}
}
#esa-notification-list{margin:4.5rem 1rem auto auto;width:min(26rem,calc(100% - 2rem));max-height:60dvh;overflow:auto;color:var(--cream);background:var(--navy-900);border:1px solid var(--navy-500);border-radius:.75rem;padding:1rem}
.esa-avatar-wrap{position:relative;flex:none;margin-inline-end:.25rem}
.esa-avatar{width:1.75rem;height:1.75rem;object-fit:contain}
.esa-avatar-wrap::after{content:"";position:absolute;inset:0;background:center/contain no-repeat}
.esa-avatar-wrap[data-avatar=classic]::after{background-image:url('/art/avatars/cap.svg')}
.esa-avatar-wrap[data-avatar=winter]::after{background-image:url('/art/avatars/beanie.svg')}
.esa-avatar-wrap[data-avatar=rose]::after{background-image:url('/art/avatars/scarf.svg')}
.esa-avatar-wrap[data-avatar=custom] .esa-avatar{border-radius:50%;object-fit:cover}
.esa-top{grid-template-columns:1fr auto minmax(0,1fr);padding-inline:max(.75rem,env(safe-area-inset-left)) max(.75rem,env(safe-area-inset-right))}
.esa-top-actions .esa-account-link{min-width:0;overflow-wrap:anywhere}
.esa-top-actions .esa-account-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esa-menu{grid-column:1;grid-row:1}
.footer-lights{display:block;height:.7rem;width:min(18rem,100%);margin:0 auto var(--space-3);background:radial-gradient(ellipse,var(--gold-400) 0 18%,transparent 49%) center/1.25rem .7rem}
.side-foot .foot-social{justify-content:start;margin:0}
@media(max-width:440px){
  .esa-top{grid-template-columns:.55fr 44px minmax(0,1fr)}
  .esa-top-actions{gap:.25rem}
  .esa-top-actions button{padding-inline:.35rem}
  .esa-top-actions .esa-avatar-wrap{display:none}
}