#notes-backdrop {
  position: fixed; inset: 0; z-index: 3; background: rgba(0,0,0,.85);
}
#notes-backdrop[hidden] { display: none; }
#notes-panel {
  position: fixed !important; z-index: 4 !important;
  inset: auto !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(80dvh, calc(100dvh - 48px)); margin: 0 !important;
  overflow: auto !important; padding: 24px !important;
  border: 1px solid #686868 !important; border-radius: 4px !important;
  background: #000 !important; color: #a3a3a3 !important;
  font: 14px/1.65 'IBM Plex Mono', monospace !important;
  box-shadow: none !important; scrollbar-width: thin; scrollbar-color: #555 #000;
}
#notes-panel[hidden] { display: none !important; }
#notes-panel h1 {
  margin: 12px 32px 20px 0 !important; color: #b3b3b3 !important;
  font: 700 26px/1.1 'Barlow Condensed', sans-serif !important;
  text-transform: uppercase; letter-spacing: .04em;
}
#notes-panel h3 { color: #aaa !important; font: 500 14px/1.5 'IBM Plex Mono', monospace !important; }
#notes-panel section { background: transparent !important; border-color: #333 !important; border-radius: 3px !important; }
#notes-panel p { color: #999 !important; font-family: inherit !important; line-height: 1.65 !important; }
#notes-panel a {
  gap: 12px !important; padding: 9px 8px !important; background: transparent !important;
  color: #aaa !important; border: 1px solid #333; border-radius: 3px !important;
  align-items: center; min-height: 44px;
}
#notes-panel a strong { color: #b3b3b3 !important; font-weight: 500; }
#notes-panel a:hover { background: #151515 !important; border-color: #777; }
#notes-panel a:focus-visible, #notes-panel button:focus-visible { outline: 2px solid #aaa; outline-offset: 3px; }
#notes-panel #notes-close {
  float: right; min-width: 32px; min-height: 32px !important; margin: -6px -6px 8px 8px;
  padding: 0 !important; background: transparent !important; border: none !important;
  color: #999 !important; font: 24px/1 monospace !important; box-shadow: none !important;
}
@media (max-width: 360px) { #notes-panel { padding: 18px !important; font-size: 13px !important; } }


#notes-panel h2 { margin: 20px 0 8px; color: #b3b3b3; font: 700 20px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
#notes-panel ul { padding-left: 20px; margin: 8px 0; }
#notes-panel li { margin-bottom: 8px; }
#notes-button { display: none; }


#notes-panel article { border-bottom:1px solid #333; padding:10px 0; }
#notes-panel footer button, #notes-panel footer a { display:inline-block; background:#000 !important; border:1px solid #666; color:#aaa; border-radius:3px; font:inherit; padding:9px 12px !important; margin:8px 8px 0 0; min-height:44px; text-decoration:none; }