/* Nine complete cases in a continuous reader, with persistent navigation. */
.project-dialog { overscroll-behavior: contain; cursor: pointer; }
.dialog-current { min-width: 0; display: grid; gap: 4px; text-align: center; }
#dialog-index { color: var(--muted); font: 9px Consolas,"Microsoft YaHei",monospace; letter-spacing: .5px; }
#dialog-title { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-chapter + .project-chapter { padding-top: 58px; }
.project-continuation { position: relative; margin-top: 64px; padding: 28px 50px 28px 0; border-top: 1px solid #ffffff24; border-bottom: 1px solid #ffffff12; }
.project-continuation > span:first-child { display: block; color: #9c9c9c; font: 10px Consolas,"Microsoft YaHei",monospace; }
.project-continuation strong { display: block; margin-top: 12px; color: #ededed; font-size: 23px; font-weight: 500; }
.continuation-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #dedede; }
.continuation-arrow .ui-icon { width: 28px; height: 28px; }
.project-reader-end { margin-top: 64px; padding: 40px 0 12px; border-top: 1px solid #ffffff24; text-align: center; }
.project-reader-end > span { display: block; color: #999; font: 10px Consolas,monospace; }
.project-reader-end strong { display: block; margin-top: 14px; font-size: 22px; font-weight: 500; }
#reader-return { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 12px 20px; border: 1px solid #ffffff35; border-radius: 18px; color: #f5f5f5; background: #ffffff08; font-size: 11px; }
.reader-at-end .dialog-bottom > button,
.reader-at-end .dialog-bottom > a { visibility: hidden; }
#visual-works { scroll-margin-top: 60px; }
.dialog-bottom { position: sticky; bottom: 0; z-index: 12; background: #101010ee; backdrop-filter: blur(18px); }

.project-documents { margin-top: 32px; }
.project-document + .project-document { margin-top: 56px; }
.project-document-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #ffffff20; }
.project-document-heading h3 { color: #f0f0f0; font-size: 23px; font-weight: 500; line-height: 1.45; }
.project-document-heading > span { color: #929292; font-size: 11px; }
.project-document-heading a { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border: 1px solid #ffffff26; border-radius: 18px; background: #ffffff06; color: #e8e8e8; font-size: 11px; }
.project-document-heading a .ui-icon { width: 16px; height: 16px; }
.project-pages { display: grid; gap: 16px; }
.project-page { margin: 0; min-width: 0; background: #e7e7e5; overflow: hidden; }
.project-page img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .dialog-current { max-width: 58%; }
  #dialog-index { font-size: 7px; letter-spacing: 0; }
  #dialog-title { font-size: 10px; }
  .project-chapter + .project-chapter { padding-top: 38px; }
  .project-continuation { margin-top: 42px; padding-block: 24px; }
  .project-continuation > span:first-child { font-size: 9px; }
  .project-continuation strong { font-size: 19px; }
  .project-reader-end { margin-top: 42px; padding-top: 30px; }
  .project-reader-end strong { font-size: 19px; }
  #visual-works { scroll-margin-top: 44px; }
  .project-documents { margin-top: 26px; }
  .project-document + .project-document { margin-top: 40px; }
  .project-document-heading { gap: 10px; margin-bottom: 16px; padding-bottom: 16px; }
  .project-document-heading h3 { font-size: 19px; }
  .project-document-heading a { padding: 10px 14px; font-size: 10px; }
  .project-pages { gap: 12px; }
}