@font-face { font-family: 'Doto'; src: url('/assets/doto.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
.tray-dev-notes { width: 190px; height: 160px; --tilt: -4deg; color: #344b3b; }
.greenbar-stack-sheet {
  position: absolute; inset: -16px 0 16px; display: grid; place-items: center;
  background: #faf7f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath fill='%23ecf2e8' d='M0 0h20v12H0z'/%3E%3C/svg%3E");
  border: 1px solid #b5b8a2;
  box-shadow: 0 3px 0 #b5b8a2, 2px 5px 0 #eeecd9, 2px 8px 0 #b5b8a2, 0 10px 0 #eeecd9, 0 13px 0 #b5b8a2, 3px 15px 0 #eeecd9, 3px 18px 0 #b5b8a2, 5px 23px 0 #0005;
}
.greenbar-stack-sheet::before, .greenbar-stack-sheet::after,
.greenbar-paper::before, .greenbar-paper::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 22px;
  background: #faf7f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24'%3E%3Ccircle cx='11' cy='12' r='4' fill='%231c1e1d'/%3E%3C/svg%3E") repeat-y;
}
.greenbar-stack-sheet::before, .greenbar-paper::before { left: 0; border-right: 1px dashed #a3b397; }
.greenbar-stack-sheet::after, .greenbar-paper::after { right: 0; border-left: 1px dashed #a3b397; }
.greenbar-stack-sheet > span { align-self: start; margin-top: 14px; font: bold 14px/1.5 monospace; letter-spacing: .1em; }
#dev-notes { width: min(912px, 100%); flex: 1; min-height: 0; }
.greenbar-viewport { flex: 1; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; box-shadow: 5px 7px 0 #0005; scrollbar-width: thin; scrollbar-color: #8e9e80 #faf7f2; }
.greenbar-viewport:focus-visible { outline: 2px solid #d6f897; outline-offset: 3px; }
.greenbar-paper {
  position: relative; color: #344b3b; background: #faf7f2; font: 900 16px/22px 'Doto', 'Courier New', monospace; font-variation-settings: 'ROND' 0;
}
.greenbar-day { padding: 22px 48px; }
.greenbar-intro, .greenbar-title, .greenbar-day {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='44'%3E%3Cpath fill='%23ecf2e8' d='M0 0h20v22H0z'/%3E%3C/svg%3E");
}
.greenbar-day + .greenbar-day, .greenbar-title { border-top: 1px dashed #a3b397; }
.greenbar-title { padding: 22px 48px 0; }
.greenbar-paper .greenbar-title h1 { margin: 0; }
.greenbar-title + .greenbar-day { padding-top: 0; }
.greenbar-intro { padding: 22px 48px 0; }
.greenbar-paper .greenbar-intro p { margin: 0 0 22px; }
.greenbar-paper h1 { margin: 0 0 22px; font: 900 18px/22px 'Doto', 'Courier New', monospace; text-transform: uppercase; letter-spacing: .12em; }
.greenbar-paper h2 { margin: 0 0 22px; font: 900 16px/22px 'Doto', 'Courier New', monospace; }
.greenbar-paper article { margin: 0 0 22px; }
.greenbar-paper time, .greenbar-paper h1, .greenbar-paper h2, .greenbar-intro { text-shadow: .6px 0 currentColor; }
.greenbar-paper a { color: inherit; }
.note-label { font-weight: normal; font-style: italic; }
.greenbar-paper p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .greenbar-paper { font-size: 14px; }
  .greenbar-day, .greenbar-intro, .greenbar-title { padding-inline: 32px; }
  .greenbar-paper::before, .greenbar-paper::after { width: 20px; }
}