.paper-scene.paper-scattered {
  width: 100%;
  max-width: 100%;
  color: #173b2e;
  isolation: isolate;
}
.paper-scene.paper-scattered[data-paper-phase="spread"] > .paper-desk {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 24rem;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 1.5rem;
  background: radial-gradient(ellipse at 48% 45%, #e6ecdf55 0%, #f8f8f300 72%);
}
.paper-scene.paper-scattered.paper-layout-pending > .paper-desk { visibility: hidden; }
.paper-scene.paper-scattered[data-paper-phase="spread"] > .paper-desk > .paper-slot {
  position: absolute;
  inset: auto;
  left: 0;
  top: 0;
  width: 22%;
  max-width: none;
  min-width: 0;
  margin: 0;
  z-index: var(--paper-layer, 1);
  pointer-events: none;
  transform: none;
  transform-origin: center;
}
.paper-scene.paper-scattered .paper-slot-1 { --paper-angle: -8deg; --paper-layer: 24; }
.paper-scene.paper-scattered .paper-slot-2 { --paper-angle: 6deg; --paper-layer: 12; }
.paper-scene.paper-scattered .paper-slot-3 { --paper-angle: -5deg; --paper-layer: 22; }
.paper-scene.paper-scattered .paper-slot-4 { --paper-angle: 7deg; --paper-layer: 5; }
.paper-scene.paper-scattered .paper-slot-5 { --paper-angle: 5deg; --paper-layer: 14; }
.paper-scene.paper-scattered .paper-slot-6 { --paper-angle: -7deg; --paper-layer: 25; }
.paper-scene.paper-scattered .paper-slot-7 { --paper-angle: 4deg; --paper-layer: 6; }
.paper-scene.paper-scattered .paper-slot-8 { --paper-angle: -6deg; --paper-layer: 18; }
.paper-scene.paper-scattered .paper-slot-9 { --paper-angle: -3deg; --paper-layer: 23; }
.paper-scene.paper-scattered .paper-slot-10 { --paper-angle: 7deg; --paper-layer: 3; }
.paper-scene.paper-scattered .paper-slot-11 { --paper-angle: -5deg; --paper-layer: 16; }
.paper-scene.paper-scattered .paper-slot-12 { --paper-angle: 6deg; --paper-layer: 10; }
.paper-scene.paper-scattered[data-paper-phase="spread"] .paper-card {
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid #e5e2d7;
  border-radius: 0.15rem 0.3rem 0.2rem 0.1rem;
  background: #fffdf6;
  pointer-events: auto;
  opacity: 1;
  filter: none;
  transform: rotate(var(--paper-angle, 0deg));
  transform-origin: center 65%;
  box-shadow: 0 2px 4px #223d2210, 0 14px 28px -13px #2e3c2b42;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.paper-scene.paper-scattered[data-paper-phase="spread"] .paper-reveal-pending > .paper-card { opacity: 0; }
.paper-scene.paper-scattered[data-paper-phase="spread"] > .paper-desk > .paper-slot:hover,
.paper-scene.paper-scattered[data-paper-phase="spread"] > .paper-desk > .paper-slot:focus-within { z-index: 50; }
.paper-scene.paper-scattered[data-paper-phase="spread"] .paper-slot:hover > .paper-card,
.paper-scene.paper-scattered[data-paper-phase="spread"] .paper-slot:focus-within > .paper-card {
  transform: translateY(-10px) rotate(0deg) scale(1.02);
  box-shadow: 0 6px 12px #223d2214, 0 23px 38px -16px #24482c55;
}
.paper-scene.paper-scattered[data-paper-phase="spread"] .paper-preview-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ebe9df;
  border-radius: 0.1rem;
  color: inherit;
  background: #fff;
  cursor: zoom-in;
  appearance: none;
}
.paper-scene.paper-scattered .paper-preview-button:focus-visible,
.paper-scene.paper-scattered .paper-close:focus-visible,
.paper-scene.paper-scattered .paper-read-link:focus-visible { outline: 3px solid #438667; outline-offset: 4px; }
.paper-scene.paper-scattered .paper-thumbnail { display: block; width: 100%; height: auto; object-fit: contain; }
.paper-scene.paper-scattered .paper-crop-window { position: relative; width: 100%; height: 0; overflow: hidden; background: #fff; }
.paper-scene.paper-scattered .paper-crop-image { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: auto; transform-origin: top left; }
.paper-scene.paper-scattered .paper-crop-dialog { border-radius: 0.3rem; outline: 1px solid #e5e7df; }
.paper-scene.paper-scattered .paper-dialog-media { min-width: 0; }
.paper-scene.paper-scattered .paper-caption { padding: 0.65rem 0.25rem 0.25rem; }
.paper-scene.paper-scattered .paper-category,
.paper-scene.paper-scattered .paper-dialog-category { margin: 0 0 0.3rem; color: #607a69; font-size: 0.7rem; letter-spacing: 0.04em; }
.paper-scene.paper-scattered .paper-title { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; white-space: normal; margin: 0; font-family: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.paper-scene.paper-scattered .paper-instruction { margin: 1rem 0 0; color: #6a796b; text-align: center; font-size: 0.82rem; line-height: 1.6; }
.paper-scene.paper-scattered .paper-dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #dde5d8;
  border-radius: 1rem;
  color: #173b2e;
  background: #fffdf6;
  box-shadow: 0 24px 100px #14382440;
}
.paper-scene.paper-scattered .paper-dialog::backdrop { background: #112d23a8; backdrop-filter: blur(5px); }
.paper-scene.paper-scattered .paper-dialog-shell { padding: clamp(1rem, 3vw, 2rem); }
.paper-scene.paper-scattered .paper-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.paper-scene.paper-scattered .paper-dialog-metadata { min-width: 0; }
.paper-scene.paper-scattered .paper-dialog-title { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.4; overflow-wrap: anywhere; }
.paper-scene.paper-scattered .paper-dialog-description { max-width: 66ch; margin: 0 0 0.75rem; color: #607363; line-height: 1.7; }
.paper-scene.paper-scattered .paper-read-link { display: inline-block; padding: 0.25rem 0; color: #1f694b; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.paper-scene.paper-scattered .paper-close { flex: 0 0 auto; padding: 0.6rem 0.85rem; border: 1px solid #cedacc; border-radius: 0.6rem; background: #f2f6ec; color: #294f3c; font: inherit; cursor: pointer; }
.paper-scene.paper-scattered .paper-close:hover { background: #e5efdf; }
.paper-scene.paper-scattered .paper-dialog-image { display: block; width: 100%; height: auto; border: 1px solid #e5e7df; border-radius: 0.3rem; background: #fff; }
.paper-scene.paper-scattered .paper-dialog [hidden] { display: none; }
.paper-scene.paper-scattered.paper-empty-scene[data-paper-phase="spread"] > .paper-desk { display: grid; place-items: center; height: 12rem; min-height: 0; }
.paper-scene.paper-scattered .paper-empty { margin: 0; color: #6a796b; line-height: 1.7; }

.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] > .paper-desk {
  display: block;
  columns: 2;
  column-gap: 20px;
  height: auto;
  min-height: 0;
  padding: 10px;
}
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] > .paper-desk > .paper-slot {
  position: relative;
  display: block;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] .paper-slot:nth-child(3n + 1) { margin-top: 9px; --paper-angle: -1.5deg; }
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] .paper-slot:nth-child(3n + 2) { margin-top: 20px; --paper-angle: 1.5deg; }
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] .paper-slot:nth-child(3n) { --paper-angle: -0.5deg; }
.paper-scene.paper-scattered.paper-narrow .paper-card { padding: 0.35rem; }
.paper-scene.paper-scattered.paper-narrow .paper-title { font-size: 0.86rem; line-height: 1.55; }
.paper-scene.paper-scattered.paper-narrow .paper-category { font-size: 0.65rem; letter-spacing: 0; }
.paper-scene.paper-scattered.paper-narrow .paper-caption { padding: 0.55rem 0.15rem 0.2rem; }
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] .paper-slot:hover > .paper-card,
.paper-scene.paper-scattered.paper-narrow[data-paper-phase="spread"] .paper-slot:focus-within > .paper-card { transform: translateY(-3px) rotate(0deg); }

@media (max-width: 760px) {
  .paper-scene.paper-scattered .paper-dialog-header { flex-wrap: wrap; }
  .paper-scene.paper-scattered .paper-close { margin-left: auto; }
  .paper-scene.paper-scattered .paper-instruction { margin-inline: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-scene.paper-scattered[data-paper-phase="spread"] .paper-card { transition: none; }
  .paper-scene.paper-scattered[data-paper-phase="spread"] .paper-slot:hover > .paper-card,
  .paper-scene.paper-scattered[data-paper-phase="spread"] .paper-slot:focus-within > .paper-card { transform: rotate(var(--paper-angle, 0deg)); }
}
