.project-reader{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0c10;color:var(--fg);overflow:hidden;overscroll-behavior:contain}
.project-reader::backdrop{background:#09090c}
.reader-bar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 36px;border-bottom:1px solid #ffffff17;background:#111015;position:relative;z-index:3}
.reader-bar button,.reader-tools button,.reader-footer button{border:0;color:inherit;background:none;font-size:13px}
.reader-back{justify-self:start;display:flex;align-items:center;gap:12px;padding:12px 0;color:#c5becd!important}
.reader-back span{font-size:20px}.reader-title{display:flex;gap:14px;align-items:baseline}.reader-title h2{margin:0;font-size:18px;font-weight:600}.reader-title small{font:10px monospace;letter-spacing:1.3px;color:#a099aa}
.reader-tools{justify-self:end;display:flex;align-items:center;gap:22px}.reader-tools button{padding:10px 0}.reader-close{font-size:26px!important;line-height:1;width:32px}.reader-progress{position:absolute;bottom:-1px;left:0;height:2px;width:100%;background:#d9bdf6;transform-origin:left;transform:scaleX(0)}
.reader-scroll{height:calc(100% - 76px);overflow:auto;overscroll-behavior:contain;scrollbar-color:#524959 #0d0c10;scrollbar-gutter:stable}
.reader-layout{max-width:1600px;margin:auto;padding:28px 36px 0;display:grid;grid-template-columns:minmax(0,1fr) 164px;gap:36px;align-items:start}
.reader-pages{min-width:0;background:#191919}.reader-sheet{position:relative;margin:0;line-height:0}.reader-sheet img{display:block;width:100%;height:auto}
.reader-toc{position:sticky;top:32px;padding-top:12px}.reader-toc-label{font:10px monospace;letter-spacing:1.4px;color:#8e8797;margin:0 0 24px}.reader-toc nav{display:grid;gap:6px}.reader-toc nav button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-left:1px solid #ffffff20;background:none;text-align:left;color:#96909f;font-size:12px;padding:12px 0 12px 14px;line-height:1.5;transition:color .2s,border-color .2s}.reader-toc nav button small{font:10px monospace;color:#746d7c}.reader-toc nav button[aria-current]{border-color:#d9bdf6;color:#e5cef9}.reader-toc nav button:hover{color:#fff}.reader-position{border-top:1px solid #ffffff17;margin-top:28px;padding-top:18px;color:#8e8797;font:11px monospace}.reader-position strong{font-size:24px;font-weight:400;color:#e2d9ed;margin-right:6px}.reader-hint{font-size:11px;color:#77717f;line-height:1.9;margin-top:18px}
.reader-footer{background:#111015;line-height:1.5;padding:50px 32px;text-align:center}.reader-footer p{font-size:11px;letter-spacing:2px;color:#9b8fa6;margin:0 0 10px}.reader-footer h3{font-size:26px;font-weight:500;margin:0 0 28px}.reader-footer div{display:flex;justify-content:center;gap:14px}.reader-footer button{border:1px solid #ffffff26;border-radius:30px;padding:13px 22px}.reader-footer .reader-return{background:#efe8f5;color:#1c1522;border-color:transparent}
@media(min-width:901px){.reader-menu{display:none}}
@media(max-width:900px){.reader-bar{height:64px;padding:0 20px;gap:12px}.reader-title small{display:none}.reader-tools{gap:14px}.reader-scroll{height:calc(100% - 64px)}.reader-layout{display:block;padding:16px 20px 0}.reader-toc{display:none;position:fixed;top:64px;right:12px;z-index:5;width:220px;padding:24px;background:#19151ff5;border:1px solid #ffffff20;border-radius:0 0 16px 16px;box-shadow:0 20px 50px #0008}.project-reader.toc-open .reader-toc{display:block}.reader-hint{display:none}.reader-position{margin-top:16px}}
@media(max-width:520px){.reader-bar{padding:0 14px}.reader-back{font-size:12px!important;gap:6px}.reader-title h2{font-size:16px}.reader-tools{gap:10px}.reader-layout{padding:0}.reader-footer{padding:42px 20px}.reader-footer h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.project-reader *{scroll-behavior:auto!important;transition:none!important}}

/* Persistent affordance for images and chapter jumps in the complete process. */
.reader-toc nav button{justify-content:space-between;padding-right:12px;cursor:pointer}
.reader-toc nav button::after{content:'›';font-size:18px;line-height:1;color:#82748e}
.reader-toc nav button:hover,.reader-toc nav button:focus-visible{background:#ffffff0a;border-left-color:#bba2d1;color:#f1e8f8}
.reader-toc nav button[aria-current]::after{color:#d9bdf6}

/* The complete-case controls use the same capsule treatment as the rest of the site. */
.reader-footer button{border-radius:999px}