/* The shelf shows spines; landscape artwork lives on a separate reading surface. */
.spine-stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:18px;overflow:hidden;background:#2455ed;min-height:450px}
.spine-room{min-width:0;color:#fff;display:flex;flex-direction:column;padding:30px 0 25px;position:relative}
.spine-room-title{padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:20px;font-weight:500}
.spine-room-title svg{color:#b5cdff;width:25px;height:25px}
.spine-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#91afff transparent;min-width:0;padding:8px 30px 23px;margin-top:auto;overscroll-behavior-x:contain}
.spine-books{display:flex;align-items:flex-end;gap:8px;width:max-content;min-width:100%;position:relative;height:355px;padding:0 5px;isolation:isolate}
.spine-slot{--spine-width:76px;--spine-height:302px;position:relative;display:block;flex:0 0 var(--spine-width);width:var(--spine-width);height:355px;outline-offset:-2px;border-radius:4px}
.spine-slot:focus-visible{outline:none}.spine-slot:focus-visible .spine-object{outline:3px solid #f3dc6f;outline-offset:5px}
.spine-object{position:absolute;bottom:0;left:0;width:100%;height:var(--spine-height);background:var(--spine-color,#87a9ff);color:var(--spine-ink,#163c89);border-radius:4px 4px 2px 2px;transform-origin:50% 100%;box-shadow:inset 2px 0 2px #fff8,inset -4px 0 5px #0d26652b,5px 7px 9px #082b9a45;pointer-events:none}
.spine-object:before{content:'';position:absolute;inset:0 auto 0 6px;width:2px;border-left:1px solid #fff6;border-right:1px solid #122d5020}
.spine-object:after{content:'';position:absolute;inset:11px 8px auto 13px;border-top:1px solid currentColor;opacity:.17}
.spine-label{display:flex;flex-direction:column;align-items:center;gap:18px;padding:25px 8px;height:100%;overflow:hidden}
.spine-title{font-size:27px;line-height:1.2;letter-spacing:.12em;writing-mode:vertical-rl;text-orientation:mixed;font-weight:800;max-height:245px;overflow:hidden}
.spine-subtitle{writing-mode:vertical-rl;text-orientation:mixed;font-size:18px;letter-spacing:.15em;line-height:1.5}
.spine-mark{position:absolute;right:12px;top:0;width:11px;height:23px;background:#e46c44;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.blank-spine{cursor:default;--spine-color:#6b92f6}.blank-1{--spine-color:#a4c0ff}.blank-2{--spine-color:#426ee3}.blank-3{--spine-color:#d5e1ff}
.blank-spine .spine-object:after{inset:auto 9px 19px 12px;border-top:2px solid #214cbd;opacity:.2}
.spine-rail{height:11px;background:#95b5ff;border-top:3px solid #d0dfff;box-shadow:0 7px 0 #173ebc,0 15px 19px #1239b77d;width:max(100%,510px);position:relative;z-index:2}
.spine-room-footer{padding:0 32px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:15px;color:#d9e5ff;min-height:23px}
#shelf-fraction{font-size:14px;white-space:nowrap}
.cover-preview{min-width:0;padding:28px;background:#eef3ff;color:#20385b;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #ffffff30}
.preview-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#fafafa;box-shadow:0 5px 20px #0c286315}
.preview-cover img{display:block;width:100%;height:100%;object-fit:contain}
.preview-cover-fallback{display:grid;place-items:center;width:100%;height:100%;background:#dbe5ff;font-size:40px;color:#2455ed}
.cover-open{position:absolute;right:14px;bottom:14px;width:43px;height:43px;display:grid;place-items:center;background:#2455ed;color:white;border-radius:50%;transform:translateY(65px);transition:transform .32s var(--spring)}
.preview-cover:hover .cover-open,.preview-cover:focus-visible .cover-open{transform:translateY(0)}
.preview-meta{display:flex;align-items:center;gap:12px;font-size:15px;color:#5e7090;margin-top:20px;line-height:1.7}
.preview-copy h3{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:9px 0 12px;line-height:1.5}
.preview-copy p{font-size:16px;line-height:1.8;margin:0;color:#5e7090;overflow-wrap:anywhere}
.preview-read{display:flex;align-items:center;justify-content:space-between;font-size:17px;color:#2455ed;border-top:1px solid #ccd7ee;padding:16px 0 0;margin-top:20px;min-height:44px}
.preview-read svg{transition:transform .24s var(--ease)}.preview-read:hover svg{transform:translate(3px,-3px)}
:root[data-theme=dark] .cover-preview{background:#202e47;color:#ecf2ff}:root[data-theme=dark] .preview-meta,:root[data-theme=dark] .preview-copy p{color:#b3c2df}:root[data-theme=dark] .preview-read{color:#a8c0ff;border-color:#3d4c66}
.reader-cover{margin:0 0 42px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafafa}
.reader-cover img{width:100%;height:100%;display:block;object-fit:contain}
.reader-layout{max-width:1280px;grid-template-columns:235px minmax(0,800px);gap:70px}
.reader-aside{top:30px}.reader-aside-label{margin-bottom:16px}
#toc{max-height:calc(100dvh - 280px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;gap:3px;padding-right:8px}
#toc a{font-size:15px;padding:8px 12px;line-height:1.65}
.reading-article{min-width:0}.reader-excerpt{margin-bottom:26px}
.article-body h3{font-size:1.4em;line-height:1.65}.article-body h4{font-size:1.15em;line-height:1.7;margin:2em 0 .8em}
.article-body blockquote{font-size:.95em}.article-body blockquote p+p{margin-top:1em}
.article-body li{margin-bottom:.55em;padding-left:.2em}.article-body ul,.article-body ol{padding-left:1.55em}
.article-body code:not(pre code){font-size:.9em;overflow-wrap:anywhere;color:var(--blue-deep);padding:2px 6px}
.code-block{margin:28px 0 34px;background:#edf2f9;border:1px solid #d9e2ee;border-radius:10px;overflow:hidden;color:#24334c}
.code-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:0 18px;border-bottom:1px solid #d9e2ee;background:#e6edf7;font-size:15px;color:#60718b}
.code-toolbar button{height:44px;padding:0 8px;color:#2859b4;font-size:15px}.code-toolbar button:hover{color:#123c96;text-decoration:underline;text-underline-offset:4px}
.article-body .code-block pre{margin:0;border:0;background:none;padding:22px;border-radius:0;font-size:15px;line-height:1.85;white-space:pre;overflow-x:auto;tab-size:4}
.article-body .code-block pre code{font-size:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:normal;overflow-wrap:normal;background:none;display:block;width:max-content;min-width:100%;color:inherit}
.hljs-comment,.hljs-quote{color:#708079;font-style:italic}.hljs-keyword,.hljs-type,.hljs-meta{color:#295cca}.hljs-string,.hljs-char,.hljs-built_in{color:#2a7855}.hljs-number,.hljs-literal{color:#b4532d}.hljs-title,.hljs-params{color:#3a5071}.hljs-title.function_{color:#865239}
.table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:9px;margin:28px 0;scrollbar-width:thin}
.article-body table{width:100%;border-collapse:collapse;font-size:.87em;line-height:1.8;min-width:540px}
.article-body th,.article-body td{text-align:left;padding:13px 17px;border-bottom:1px solid var(--line);vertical-align:top}
.article-body th{background:var(--soft);font-weight:600;white-space:nowrap}.article-body td+td,.article-body th+th{border-left:1px solid var(--line)}.article-body tr:last-child td{border-bottom:0}
.article-body img{max-width:100%;height:auto;border-radius:8px}
.mobile-toc{display:none;margin-bottom:32px;border-block:1px solid var(--line);padding:14px 0}.mobile-toc summary{font-size:17px;min-height:32px;cursor:pointer;color:var(--blue)}#mobile-toc{display:flex;flex-direction:column;padding:15px 0 0;gap:6px}#mobile-toc a{font-size:16px;line-height:1.7;padding:9px 0}
:root[data-theme=dark] .code-block{background:#1d2a3b;border-color:#354760;color:#d1ddf0}:root[data-theme=dark] .code-toolbar{background:#25344b;border-color:#354760;color:#a5b7d0}:root[data-theme=dark] .code-toolbar button{color:#acc9ff}:root[data-theme=dark] .hljs-comment{color:#93a7a5}:root[data-theme=dark] .hljs-keyword,:root[data-theme=dark] .hljs-type,:root[data-theme=dark] .hljs-meta{color:#94b8ff}:root[data-theme=dark] .hljs-string,:root[data-theme=dark] .hljs-char,:root[data-theme=dark] .hljs-built_in{color:#9bd2b0}:root[data-theme=dark] .hljs-title,:root[data-theme=dark] .hljs-params{color:#e1e9f5}:root[data-theme=dark] .hljs-title.function_,:root[data-theme=dark] .hljs-number,:root[data-theme=dark] .hljs-literal{color:#e9b58a}
@media(max-width:1150px){.spine-stage{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.spine-room-title{font-size:18px;padding-inline:25px}.spine-viewport{padding-inline:22px}.spine-room-footer{padding-inline:25px;font-size:14px}.spine-room-footer #shelf-fraction{display:none}.cover-preview{padding:23px}.preview-copy h3{font-size:23px}.spine-books{height:330px}.spine-slot{height:330px}.spine-room{padding-top:27px}.reader-layout{gap:40px;grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:900px){.spine-stage{grid-template-columns:minmax(0,1fr)}.spine-room-title{padding-inline:28px}.spine-room{padding-top:25px}.spine-viewport{padding-inline:28px}.spine-books{min-width:100%}.spine-room-footer{padding-inline:28px}.cover-preview{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:26px 28px}.preview-meta{margin-top:0;font-size:14px}.preview-copy h3{font-size:23px}.preview-copy p{font-size:15px}.preview-read{margin-top:15px;padding-top:12px}.reader-layout{display:block;max-width:850px}.mobile-toc{display:block}.reader-aside{display:none}}
@media(max-width:600px){.spine-stage{border-radius:13px}.spine-room{padding:22px 0 20px}.spine-room-title{font-size:18px;padding-inline:22px}.spine-room-title svg{width:22px}.spine-viewport{padding:6px 22px 19px}.spine-books{height:320px;gap:7px}.spine-slot{height:320px;--spine-width:68px;--spine-height:280px}.blank-spine{--spine-height:240px}.spine-title{font-size:25px}.spine-subtitle{font-size:17px}.spine-label{padding-block:22px;gap:15px}.spine-room-footer{padding-inline:22px;font-size:14px}.spine-rail{min-width:510px}.cover-preview{display:block;padding:22px}.preview-meta{margin-top:18px;font-size:14px}.preview-copy h3{font-size:23px;margin-block:9px}.preview-copy p{font-size:15px}.preview-read{font-size:16px;margin-top:18px;padding-top:15px}.cover-open{width:38px;height:38px;right:10px;bottom:10px;transform:translateY(0)}.reader-cover{margin-bottom:25px;border-radius:7px}.article-body .code-block pre{padding:16px;font-size:15px;line-height:1.9}.code-toolbar{padding-inline:12px;font-size:14px}.code-toolbar button{font-size:14px}.code-block{margin-block:22px}.article-body h3{font-size:1.3em}.article-body h4{font-size:1.12em}.reader-toolbar .text-button{font-size:0;gap:6px}.reader-toolbar .text-button:after{content:'书架';font-size:15px}.reader-controls .icon-button{width:44px;min-width:44px}}
@media(prefers-reduced-motion:reduce){.spine-object{transform:none!important}.cover-open{transition:none}}
@media print{.reader-cover{max-width:600px}.mobile-toc,.code-toolbar button{display:none}.code-block,.article-body table{break-inside:avoid}.article-body .code-block pre{white-space:pre-wrap;overflow:visible}.article-body .code-block pre code{width:auto;white-space:pre-wrap}.code-toolbar{min-height:25px}.table-scroll{overflow:visible}.article-body table{min-width:0}}