/* Right edge navigation, inspired by Branched Menu and Comet Dial. */
.reading-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:45;padding:20px 10px 20px 18px;font-family:"Plus Jakarta Sans","Noto Sans SC",sans-serif;color:#294a5b}
.reading-trigger{position:relative;display:grid;place-items:center;width:64px;height:76px;border:1px solid #ffffffa8;border-radius:36px;background:#fffaf0db;box-shadow:0 4px 24px #334f6014;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s,box-shadow .25s}
.reading-trigger:hover,.reading-rail.is-open .reading-trigger{background:#fffcf6;box-shadow:0 5px 28px #334f602b}
.comet-dial{position:absolute;top:3px;left:2px;width:58px;height:58px;overflow:visible;fill:none}
.dial-ticks{stroke:#9cabb0;stroke-width:2;stroke-dasharray:1 5.1;opacity:.5}
.dial-track{stroke:#dce3df;stroke-width:2}
.dial-fill{stroke:#b47849;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:40px 40px;transition:stroke-dashoffset .2s linear}
.dial-comet{transform-origin:40px 40px;transition:transform .2s linear;fill:#b47849;filter:drop-shadow(0 0 3px #c3915b90)}
.reading-percent{position:absolute;top:23px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.reading-percent span{font-size:8px;margin-left:1px}
.reading-menu-hint{position:absolute;bottom:9px;font-size:7px;letter-spacing:.13em;font-weight:700}
.reading-panel{position:absolute;right:82px;top:50%;width:248px;max-width:calc(100vw - 104px);max-height:calc(100dvh - 110px);overflow:auto;transform:translateY(-50%);padding:18px 16px 16px;border:1px solid #ffffffbd;border-radius:19px;background:#fffaf2f5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 14px 55px #263e5521}
.reading-panel[hidden]{display:none}
.reading-rail.is-open .reading-panel{animation:reading-panel-in .3s cubic-bezier(.2,.8,.2,1) both}
.reading-panel-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.reading-title{font-size:10px;letter-spacing:.12em;font-weight:700;color:#78898d}
.reading-close{width:32px;height:32px;font-size:22px;border-radius:50%;color:#657b83;background:transparent;border:0}
.reading-close:hover{background:#e8e9df}
.branched-nav details{margin:0 0 8px}
.branched-nav summary{display:flex;align-items:center;gap:9px;min-height:36px;list-style:none;font-size:13px;font-weight:600;border-radius:8px}
.branched-nav summary::-webkit-details-marker{display:none}
.branch-number{font-size:9px;color:#a38763;letter-spacing:.04em}
.branch-chevron{margin-left:auto;transition:transform .25s}
.branched-nav details:not([open]) .branch-chevron{transform:rotate(-90deg)}
.branch-children{position:relative;margin-left:9px;padding:0 0 3px 22px;border-left:1.5px solid #c7d1cd;transform-origin:top left}
.branched-nav details[open] .branch-children{animation:branch-draw .35s ease both}
.branch-children a{position:relative;display:flex;align-items:center;min-height:38px;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.5;color:#657b83;text-decoration:none;transition:color .2s,background .2s}
.branch-children a::before{content:"";position:absolute;width:17px;height:11px;left:-23px;top:8px;border-left:1.5px solid #c7d1cd;border-bottom:1.5px solid #c7d1cd;border-radius:0 0 0 7px}
.branch-children a:hover{background:#ecefe6;color:#294a5b}
.branch-children a[aria-current]{background:#e6ece2;color:#294a5b;font-weight:700}
.branch-children a[aria-current]::before{border-color:#b47849}
.reading-caption{font-size:9px;color:#83918d;margin-top:14px}
.reading-meter{height:3px;background:#e4e8e0;border-radius:3px;margin-top:9px;overflow:hidden}
.reading-meter i{display:block;height:100%;background:#b47849;transition:width .2s linear}
.reading-rail :focus-visible{outline:2px solid #b47849;outline-offset:3px}
body:has(dialog[open]) .reading-rail,body:has(#memoModal:not(.hidden)) .reading-rail{visibility:hidden}
@keyframes reading-panel-in{from{opacity:0;transform:translate(14px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes branch-draw{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.reading-rail{top:auto;bottom:22px;transform:none;padding:8px 6px 8px 10px}.reading-trigger{width:54px;height:64px}.comet-dial{width:48px;height:48px}.reading-percent{top:20px;font-size:11px}.reading-menu-hint{bottom:7px;font-size:6px}.reading-panel{right:66px;top:auto;bottom:8px;transform:none;width:236px;max-width:calc(100vw - 82px);max-height:calc(100dvh - 120px)}.reading-rail.is-open .reading-panel{animation:branch-draw .25s ease both}.reading-close,.branch-children a,.branched-nav summary{min-height:44px}}
@media(prefers-reduced-motion:reduce){.reading-rail *{animation:none!important;transition:none!important}}
