.journal-reader {
  width: min(1180px, calc(100vw - 72px));
  height: min(860px, calc(100svh - 70px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-top: 5px solid #df432f;
  background: #eeece4;
  color: #151715;
  overflow: hidden;
  box-shadow: 14px 14px 0 #15171540, 0 30px 100px #0004;
  color-scheme: light;
}

.journal-reader::backdrop { background: #151715b8; backdrop-filter: blur(12px); }
.journal-reader[open] { animation: reader-open .52s cubic-bezier(.16,1,.3,1) both; }
.journal-reader[open].is-closing { animation: reader-close .26s ease-in both; pointer-events: none; }
.reader-shell { display: grid; grid-template-rows: 64px minmax(0,1fr) 62px; height: 100%; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 26px; border-bottom: 1px solid #15171535; }
.reader-toolbar > div { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.reader-symbol { display: grid; place-items: center; width: 28px; height: 28px; background: #df432f; font-weight: 750; }
.reader-count { color: #62665f; font: 10px var(--mono); }
.reader-toolbar button { display: flex; gap: 24px; align-items: center; min-height: 44px; padding: 4px 0 4px 12px; font-size: 12px; }
.reader-toolbar button > span { font: 28px/1 Arial,sans-serif; transition: transform .25s; }
.reader-toolbar button:hover > span { transform: rotate(90deg); }
.reader-layout { display: grid; grid-template-columns: 225px minmax(0,1fr); min-height: 0; }
.reader-sidebar { display: flex; flex-direction: column; gap: 22px; min-height: 0; overflow: auto; padding: 32px 20px 25px 26px; border-right: 1px solid #15171525; background: #e5e3da; }
.reader-sidebar > p { color: #62665f; font-size: 11px; }
.reader-sidebar nav { display: grid; gap: 4px; }
.reader-sidebar button { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 12px 10px; text-align: left; font-size: 12px; line-height: 1.7; border-left: 2px solid transparent; }
.reader-sidebar button > span:first-child { font: 9px/2 var(--mono); color: #62665f; }
.reader-sidebar button[aria-current] { border-color: #df432f; background: #eeece4; }
.reader-sidebar button[aria-current] > span:first-child { color: #df432f; }
.reader-sidebar button:hover { background: #eeece4; }
.reader-sidebar-foot { padding: 36px 10px 0; margin-top: auto; font-size: 20px; font-weight: 750; line-height: 1.6; letter-spacing: -.04em; }
.reader-sidebar-foot span { color: #62665f; }
@media (max-height: 760px) { .reader-sidebar-foot { display: none; } }
.reader-scroll { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #df432f #1517150a; }
.reader-scroll:focus-visible { outline: 2px solid #df432f; outline-offset: -4px; }
.reader-paper { max-width: 820px; margin: 0 auto; padding: clamp(30px,4vw,58px) clamp(25px,4.4vw,64px) 50px; }
.reader-topic { margin-bottom: 17px; color: #b53222; font-size: 12px; }
.reader-paper h2 { font-size: clamp(26px,3.1vw,42px); line-height: 1.5; font-weight: 800; letter-spacing: -.045em; overflow-wrap: anywhere; }
.reader-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 21px 0 24px; margin-bottom: 27px; border-bottom: 1px solid #15171540; color: #62665f; font-size: 11px; }
.reader-excerpt-label { border: 1px solid #b5322250; padding: 3px 7px; color: #b53222; }
.reader-notice { margin-bottom: 32px; border-left: 2px solid #df432f; padding: 3px 0 3px 14px; color: #62665f; font-size: 12px; line-height: 1.9; }
.reader-prose { color: #2c302b; font-size: 16px; line-height: 2; overflow-wrap: anywhere; }
.reader-prose > * + * { margin-top: 1.25em; }
.reader-prose p { white-space: pre-wrap; }
.reader-prose h3 { margin-top: 1.7em; font-size: 22px; line-height: 1.55; font-weight: 750; color: #151715; }
.reader-prose h4 { margin-top: 1.6em; font-size: 18px; line-height: 1.6; color: #151715; }
.reader-prose ul, .reader-prose ol { padding-left: 1.5em; }
.reader-prose li + li { margin-top: .65em; }
.reader-prose blockquote { margin-left: 0; margin-right: 0; border-left: 3px solid #df432f; padding: 10px 20px; background: #15171505; }
.reader-prose a { text-decoration: underline; text-underline-offset: .25em; }
.reader-prose pre { max-width: 100%; overflow: auto; padding: 16px; background: #151715; color: #eeece4; font: 13px/1.8 var(--mono); }
.reader-prose code { font-family: var(--mono); }
.reader-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-prose .reader-media-note { color: #62665f; font-size: 12px; padding: 12px 0; border-block: 1px dashed #15171530; }
.reader-media-note span { display: block; font-size: 10px; }
.reader-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 24px; }
.reader-table-wrap table { border-collapse: collapse; font-size: 13px; line-height: 1.8; min-width: 360px; width: 100%; }
.reader-table-wrap th, .reader-table-wrap td { border: 1px solid #15171525; padding: 12px; text-align: left; vertical-align: top; }
.reader-table-wrap th { background: #e5e3da; font-weight: 650; }
.reader-source { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 44px; padding-top: 24px; border-top: 1px solid #15171540; }
.reader-source p { color: #62665f; font-size: 12px; }
.reader-source a { display: flex; align-items: center; gap: 25px; min-height: 44px; padding: 0 14px; background: #151715; color: #eeece4; font-size: 12px; }
.reader-source a:hover { background: #df432f; color: #151715; }
.reader-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 26px; border-top: 1px solid #15171535; }
.reader-page-controls { display: flex; gap: 20px; }
.reader-page-controls button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-size: 12px; }
.reader-page-controls button:hover:not(:disabled) { color: #b53222; }
.reader-progress { display: flex; align-items: center; gap: 14px; color: #62665f; font-size: 10px; }
.reader-progress > div { width: 92px; height: 2px; background: #15171520; }
.reader-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #df432f; }
.reader-footer > a { padding: 12px 0; font-size: 11px; border-bottom: 1px solid #151715; }
.journal-reader :focus-visible { outline-color: #b53222; }
.journal-reader [hidden] { display: none; }
@keyframes reader-open { from { opacity: 0; transform: perspective(1600px) translate3d(55px,24px,0) rotateY(-5deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes reader-close { to { opacity: 0; transform: translate3d(35px,10px,0) scale(.97); } }

@media (max-width: 1000px) {
  .journal-reader { width: calc(100vw - 40px); height: calc(100svh - 40px); }
  .reader-layout { grid-template-columns: 185px minmax(0,1fr); }
  .reader-sidebar { padding: 25px 12px; }
  .reader-sidebar button { font-size: 11px; padding-left: 6px; padding-right: 6px; gap: 7px; }
  .reader-progress > div { width: 60px; }
}
@media (max-width: 700px) {
  .journal-reader { width: calc(100vw - 20px); height: calc(100svh - 20px); box-shadow: 6px 6px 0 #15171540; }
  .reader-shell { grid-template-rows: 57px minmax(0,1fr) 60px; }
  .reader-toolbar { padding: 0 16px; gap: 10px; }
  .reader-toolbar > div { gap: 9px; font-size: 11px; }
  .reader-symbol { width: 23px; height: 23px; }
  .reader-toolbar button { gap: 12px; font-size: 11px; }
  .reader-layout { display: block; overflow: hidden; }
  .reader-sidebar { display: none; }
  .reader-scroll { height: 100%; }
  .reader-paper { padding: 30px 24px 36px; }
  .reader-topic { margin-bottom: 12px; font-size: 11px; }
  .reader-paper h2 { font-size: 27px; line-height: 1.5; }
  .reader-byline { padding: 18px 0; margin-bottom: 22px; font-size: 10px; }
  .reader-notice { margin-bottom: 26px; font-size: 11px; }
  .reader-prose { font-size: 15px; line-height: 1.95; }
  .reader-prose h3 { font-size: 20px; }
  .reader-prose h4 { font-size: 17px; }
  .reader-footer { padding: 0 16px; gap: 8px; }
  .reader-page-controls { gap: 15px; }
  .reader-page-controls button { font-size: 11px; gap: 5px; }
  .reader-progress { font-size: 9px; }
  .reader-progress > div { display: none; }
  .reader-footer > a { font-size: 10px; }
}
@media (max-width: 370px) {
  .reader-paper { padding-left: 19px; padding-right: 19px; }
  .reader-paper h2 { font-size: 25px; }
  .reader-footer { padding: 0 12px; }
  .reader-page-controls { gap: 9px; }
  .reader-progress { font-size: 8px; }
}
.journal-reader[data-still="true"] { animation: none !important; }
.journal-reader[data-still="true"] * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .journal-reader, .journal-reader * { animation: none !important; transition: none !important; }
}