html.reader-open { overflow:hidden; }
.case-reader { width:96vw; max-width:1800px; height:92dvh; max-height:96dvh; padding:0; border:1px solid #94927566; color:#35575a; background:var(--color-cream); overflow:hidden; }
.case-reader::backdrop,.long-reader::backdrop { background:#183c47c9; backdrop-filter:blur(8px); }
.reader-bar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid #94927544; gap:20px; }.reader-bar span { font-size:10px; letter-spacing:.12em; }.reader-bar h2 { font-size:23px; margin-top:4px; }.reader-close,.long-reader header button { border:1px solid #94927577; background:transparent; color:inherit; padding:10px 16px; cursor:pointer; white-space:nowrap; }
.reader-layout { height:calc(100% - 76px); display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.8fr) minmax(260px,.9fr); }
.reader-preview { background:#e1e0ce; padding:20px 14px 0; display:flex; flex-direction:column; min-height:0; border-right:1px solid #94927555; }.reader-label { display:flex; justify-content:space-between; font-size:12px; gap:8px; }.open-long { background:var(--color-blue); color:var(--color-cream); border:0; padding:14px 8px; margin:16px 0; cursor:pointer; font:14px var(--font-sans); }
.preview-scroll { overflow:auto; min-height:0; scrollbar-width:thin; padding:0 6px 20px; }.preview-scroll button { display:block; padding:5px; width:100%; background:transparent; border:1px solid transparent; margin:0 0 14px; cursor:pointer; }.preview-scroll button.current { border-color:var(--color-blue); background:#fff9e9; }.preview-scroll img { width:100%; height:auto; }.preview-scroll button span { display:block; font-size:11px; padding-top:5px; }
.reader-content { overflow:auto; padding:25px 24px 80px; overscroll-behavior:contain; scrollbar-width:thin; }.reader-chapter { margin-bottom:45px; }.reader-chapter header { padding:15px 0 25px; }.reader-chapter header>span { font-size:11px; letter-spacing:.1em; color:#91734b; }.reader-chapter h3 { font-size:32px; margin:16px 0; }.reader-chapter p { font:14px/1.9 var(--font-sans); color:#63756a; }.reader-chapter figure { margin:0 0 25px; }.reader-chapter figure img { width:100%; height:auto; background:#e1e0ce; }.reader-chapter figcaption { display:flex; justify-content:space-between; gap:10px; font:11px/1.6 var(--font-sans); margin-top:8px; }.reader-chapter figcaption a { color:var(--color-blue); }
.reader-side { background:#e1e0ce; border-left:1px solid #94927555; min-height:0; display:flex; flex-direction:column; }.identity-lab { padding:20px; perspective:800px; border-bottom:1px solid #94927555; }.identity-lab>span { font-size:10px; letter-spacing:.1em; }.identity-mark { position:relative; margin:14px 0; background:var(--identity-color); padding:15px; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .2s,background .4s; }.identity-mark img { width:100%; height:115px; object-fit:contain; }.identity-mark::after { content:''; position:absolute; inset:8px; pointer-events:none; opacity:0; background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:20px 20px; border:1px dashed #fff; transition:opacity .3s; }.show-grid .identity-mark::after { opacity:1; }.identity-colors { display:flex; gap:10px; align-items:center; }.identity-colors [data-color] { width:27px; height:27px; border:2px solid transparent; border-radius:50%; cursor:pointer; }.identity-colors [aria-pressed=true] { outline:1px solid #35829a; outline-offset:3px; }.identity-grid { margin-left:auto; border:0; background:transparent; color:inherit; cursor:pointer; }.identity-lab small { display:block; font-size:10px; margin-top:12px; }
.reader-navigation { display:grid; grid-template-columns:1fr 62px; flex:1; min-height:0; }.reader-toc { overflow:auto; padding:20px 12px; scrollbar-width:thin; }.reader-toc h3 { font-size:20px; margin-bottom:15px; }.reader-toc button { display:flex; gap:10px; width:100%; border:0; border-top:1px solid #94927533; padding:13px 5px; background:transparent; color:inherit; text-align:left; cursor:pointer; font:13px/1.5 var(--font-sans); }.reader-toc button>span:first-child { color:#91734b; font-size:10px; }.reader-toc small { display:block; font-size:10px; opacity:.7; margin-top:4px; }.reader-toc button[aria-current] { background:var(--color-blue); color:var(--color-cream); }.reader-toc button[aria-current]>span:first-child { color:inherit; }.reader-timeline { display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 8px; border-left:1px solid #94927544; font-size:11px; }.reader-rail { width:3px; flex:1; background:#94927544; min-height:80px; }.reader-rail i { display:block; height:100%; background:var(--color-blue); transform:scaleY(var(--read-progress,0)); transform-origin:top; }.reader-timeline>span:last-child { writing-mode:vertical-rl; letter-spacing:4px; }
.long-reader { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; padding:0; margin:0; border:0; background:#e1e0ce; color:#35575a; overflow:hidden; }.long-reader header { height:64px; display:flex; justify-content:space-between; align-items:center; padding:10px 24px; background:var(--color-cream); font-size:13px; }.long-pages { height:calc(100% - 64px); overflow:auto; overscroll-behavior:contain; padding:24px max(16px,calc((100vw - 1440px)/2)); }.long-pages img { width:100%; height:auto; display:block; margin:0; }
@media(max-width:1100px){.reader-layout{grid-template-columns:165px minmax(0,1fr) 245px;}.reader-content{padding-inline:16px;}.identity-lab{padding:14px;}.reader-navigation{grid-template-columns:1fr 44px;}}
@media(max-width:760px){.case-reader{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;}.reader-bar{height:76px;padding:12px;}.reader-bar h2{font-size:18px;}.reader-bar span{font-size:8px;}.reader-close{padding:8px;}.reader-layout{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);}.reader-preview{grid-row:1;padding:8px 12px;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;border-right:0;}.reader-label{font-size:10px;}.open-long{margin:0;padding:10px;font-size:12px;}.preview-scroll{display:none;}.reader-side{grid-row:2;border:0;}.identity-lab{display:none;}.reader-navigation{display:block;}.reader-timeline{display:none;}.reader-toc{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;}.reader-toc h3{display:none;}.reader-toc button{width:auto;flex-shrink:0;padding:8px;font-size:12px;border:1px solid #94927533;}.reader-toc button>span:first-child,.reader-toc small{display:none;}.reader-content{grid-row:3;padding:12px 14px 40px;}.reader-chapter h3{font-size:27px;}.reader-chapter figcaption{font-size:10px;}.long-reader header{padding-inline:12px;font-size:11px;}.long-pages{padding:12px 0;}}
@media(prefers-reduced-motion:reduce){.identity-mark{transition:none;transform:none;}}