.reading main { margin-top: 48px; }
.paper-window { position: relative; margin: 0 -8px 12px; }
.paper-window::before, .paper-window::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 7vw, 40px); z-index: 10; pointer-events: none;
}
.paper-window::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.paper-window::after { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
.paper-shelf {
  overflow-x: auto; overflow-y: hidden;
  padding: 14px 8px 10px;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.paper-shelf::-webkit-scrollbar { display: none; width: 0; height: 0; }
.paper-row {
  --card-rest: 118px;
  --card-active: 280px;
  position: relative; display: flex; align-items: flex-end; gap: 10px;
  width: max-content; min-width: 100%;
  padding-inline: var(--rail-edge, 0px);
}
.paper-link {
  flex: 0 0 var(--card-rest); width: var(--card-rest); min-width: 0; padding: 0 6px 17px;
  color: var(--muted); text-decoration: none; position: relative; z-index: 1;
}
.paper-slot { display: block; position: relative; height: calc((var(--card-active) - 12px) * 1.29445 + 32px); }
.paper-object {
  display: block; position: absolute; left: 0; right: 0; bottom: 18px; aspect-ratio: 360 / 466; background: #fff; z-index: 1;
  transform-origin: top left;
  border: 1px solid #d6d6d6;
  box-shadow: 2px 2px 0 #fafafa, 3px 3px 0 #d6d6d6, 4px 4px 0 #fafafa, 5px 5px 0 #d6d6d6, 0 8px 16px #00000014;
  transition: box-shadow 380ms;
}
.paper-object img { display: block; width: 100%; height: 100%; object-fit: contain; }
.paper-link:hover { text-decoration: none; z-index: 3; color: var(--ink); }
.paper-link:hover .paper-object, .paper-link:focus-visible .paper-object { box-shadow: 2px 2px 0 #fafafa, 3px 3px 0 #d6d6d6, 4px 4px 0 #fafafa, 5px 5px 0 #d6d6d6, 0 12px 20px #00000020; }
.paper-link.is-selected { flex-basis: var(--card-active); width: var(--card-active); z-index: 4; color: var(--ink); }
.paper-link.is-selected .paper-object {
  bottom: 26px;
  box-shadow: 2px 2px 0 #fafafa, 3px 3px 0 #d6d6d6, 4px 4px 0 #fafafa, 5px 5px 0 #d6d6d6, 0 12px 20px #00000020;
}
.paper-link:focus-visible { outline: none; }
.paper-position { display: none; width: min(200px, 50%); height: 2px; margin: 0 auto 12px; background: var(--line); pointer-events: none; }
.is-enhanced .paper-position { display: block; }
.paper-position[hidden] { display: none; }
.paper-position-marker {
  display: block; height: 100%; width: var(--position-size, 0%); background: var(--ink);
  transform: translateX(var(--position-offset, 0%));
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
.paper-position.is-tracking .paper-position-marker { transition: none; }
.paper-placeholder { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 24px 18px; color: #222; text-align: center; font: 600 16px/1.45 Georgia, serif; }
.paper-link:not(.is-selected) .paper-placeholder { padding: 12px 8px; font-size: 10px; }
.paper-note[hidden] { display: none; }
.paper-notes { padding-top: 0; }
.paper-note h1 { font-size: 24px; line-height: 1.4; margin: 0 0 20px; }
.paper-note h1 a { color: inherit; text-decoration: none; }
.paper-note h1 a:hover { color: var(--muted); }
.paper-external-arrow { color: var(--muted); font-size: .72em; font-weight: 400; white-space: nowrap; }
.is-enhanced .paper-note.is-selected { animation: note-arrive 220ms ease-out; }
@keyframes note-arrive { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .reading main { margin-top: 34px; }
  .paper-position { margin-bottom: 10px; }
  .paper-row { --card-rest: 108px; --card-active: min(240px, calc(100vw - 112px)); gap: 8px; }
  .paper-note h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-object, .paper-link:hover .paper-object, .paper-link:focus-visible .paper-object, .paper-link.is-selected .paper-object { transition: none; }
  .is-enhanced .paper-note.is-selected { animation: none; }
  .paper-position-marker { transition: none; }
}
@media print { .paper-shelf, .is-enhanced .paper-position { display: none; } .paper-notes { border: 0; padding: 0; } }
