/* A reading sheet that belongs to the same illustrated collection. */
.reader-page { min-width: 1100px; }
.reader-header { max-width: 1600px; margin: 0 auto; padding: 27px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); color: var(--ink); }
.reader-header .brand { color: var(--ink); }
.reader-header .brand .brand-mark { stroke: var(--ink); }
.reader-header .brand-mark path:first-child { fill: var(--ink); stroke: var(--ink); }
.reader-header .brand-mark path:nth-child(2) { stroke: var(--paper); }
.reader-header-actions { display: flex; align-items: center; gap: 30px; }
.reader-header-actions>a { text-decoration: none; font-size: 18px; }
.reader-header .theme-picker { z-index: 8; }
.reader-layout { display: grid; grid-template-columns: 215px minmax(0,1080px); gap: 45px; max-width: 1500px; margin: 36px auto 90px; padding: 0 50px; }
.reader-sidebar { min-width: 0; }
#reader-toc { position: sticky; top: 32px; max-height: calc(100dvh - 64px); overflow: auto; scrollbar-width: thin; font-size: 17px; padding: 11px 0; }
#reader-toc:empty { display: none; }
#reader-toc a { display: block; color: var(--muted); text-decoration: none; padding: 8px 13px; border-left: 2px solid transparent; line-height: 1.55; }
#reader-toc a:hover { color: var(--ink); background: var(--panel); }
#reader-toc a[aria-current=true] { color: var(--ink); border-color: var(--action); background: var(--tag-paper); }
#reader-toc .toc-subheading { font-size: 16px; padding-left: 25px; }
.reader-sheet { min-width: 0; padding: 25px 48px 55px; background: var(--card) url('assets/paper-grain.svg'); border: 1px solid var(--card-border); border-radius: 5px 9px 4px 8px; box-shadow: 3px 5px 0 var(--card-shadow); }
.reader-document-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; margin-bottom: 25px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.reader-document-tools>div { display: flex; gap: 22px; align-items: center; }
.reader-document-tools a { text-decoration: none; }
.reader-document-tools button { padding: 0; font-size: inherit; }
.reader-document-tools button:hover { color: var(--action); }
.markdown-body { font-size: 19px; line-height: 1.95; color: var(--ink); overflow-wrap: anywhere; }
.markdown-body>:first-child { margin-top: 0; }
.markdown-body h1 { font-size: 40px; line-height: 1.4; margin: 0 0 25px; font-weight: 500; text-wrap: pretty; }
.markdown-body h2 { font-size: 28px; line-height: 1.5; margin: 45px 0 18px; padding-top: 23px; border-top: 1px solid var(--line); font-weight: 500; scroll-margin-top: 24px; }
.markdown-body h3 { font-size: 23px; line-height: 1.55; margin: 29px 0 14px; font-weight: 500; scroll-margin-top: 24px; }
.markdown-body h4 { font-size: 20px; font-weight: 500; margin-bottom: 10px; }
.markdown-body p { margin: 16px 0; }
.markdown-body strong { font-weight: 500; color: var(--ink); }
.markdown-body a { color: var(--action); text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.markdown-body a:hover { color: var(--accent); text-decoration-color: currentColor; }
.markdown-body ul, .markdown-body ol { padding-left: 28px; margin: 18px 0; }
.markdown-body li { margin: 9px 0; padding-left: 4px; }
.markdown-body li::marker { color: var(--action); }
.markdown-body li>p { margin: 8px 0; }
.markdown-body blockquote { margin: 22px 0; padding: 1px 22px; border-left: 3px solid var(--action); background: var(--panel); color: var(--muted); }
.markdown-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
.markdown-body :not(pre)>code { font: 16px/1.8 var(--text-font); background: var(--prompt-paper); border: 1px solid var(--line); padding: 2px 5px; border-radius: 3px; box-decoration-break: clone; white-space: normal; }
.markdown-body pre { position: relative; margin: 20px 0; padding: 45px 22px 20px; border: 1px solid var(--line); border-radius: 4px 6px 3px 5px; background: var(--prompt-paper); overflow: auto; font: 17px/1.85 var(--text-font); color: var(--ink); scrollbar-width: thin; }
.markdown-body pre code { font: inherit; }
.markdown-body pre.is-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-code-copy { position: absolute; top: 9px; right: 12px; padding: 3px 7px; color: var(--action); font: 15px/1.5 var(--font); background: var(--prompt-paper); border-radius: 3px; }
.reader-code-copy:hover { background: var(--selection); }
.reader-table-wrap { overflow-x: auto; margin: 23px 0; border: 1px solid var(--line); border-radius: 4px; scrollbar-width: thin; }
.markdown-body table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 17px; line-height: 1.75; }
.markdown-body th { text-align: left; font-weight: 500; color: var(--ink); background: var(--tag-paper); }
.markdown-body th, .markdown-body td { padding: 12px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
.markdown-body tr:last-child td { border-bottom: 0; }
.markdown-body td+td, .markdown-body th+th { border-left: 1px solid var(--line); }
.markdown-body img { display: block; max-width: 100%; max-height: 740px; width: auto; height: auto; object-fit: contain; margin: 25px auto; border-radius: 2px; }
.markdown-body video { display: block; max-width: 100%; max-height: 740px; margin: 25px auto; }
.reader-image-link { display: block; }
.reader-image-missing { border: 1px dashed var(--line); padding: 22px; color: var(--muted); font-size: 17px; }
#reader-error h1 { font-size: 34px; font-weight: 500; }
#reader-error p { color: var(--muted); }
#reader-retry { border: 1px solid var(--line); background: var(--panel); padding: 9px 23px; border-radius: 4px; }
#reader-feedback { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); max-width: 70vw; padding: 10px 20px; background: var(--ink); color: var(--card); font-size: 17px; border-radius: 4px 7px 3px 6px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 20; }
#reader-feedback.visible { opacity: 1; }
.reader-loading { color: var(--muted); }
.reader-page [hidden] { display: none!important; }
[data-theme=ink] .reader-sheet, [data-theme=ink] .reader-table-wrap, [data-theme=ink] .markdown-body pre { border-radius: 1px; }
[data-theme=ink] .reader-header, [data-theme=ink] .reader-document-tools { border-bottom: 3px double var(--line); }
@media(max-width:1279px) { .reader-header { padding-inline: 35px; } .reader-layout { grid-template-columns: 180px minmax(0,1fr); gap: 25px; padding-inline: 35px; } .reader-sheet { padding-inline: 32px; } }
@media print { .reader-header,.reader-sidebar,.reader-document-tools,.reader-code-copy,#reader-feedback { display: none; } .reader-layout { display: block; padding: 0; margin: 0; max-width: none; } .reader-sheet { border: 0; box-shadow: none; padding: 0; background: white; } .reader-page { min-width: 0; background: white; } }

.reader-header .brand:hover { color: var(--ink); }