/* 更新日志页 /changelog(docs/更新日志页-规格.md)。无 JS / 列表视图 = 纵向文档;.is-book = 翻页。地址带内容哈希,不跟全站 CSS_V */
.cl{--c:var(--obs-glow);--ink:var(--obs-ink);--s:var(--obs-ink-soft);--u:var(--obs-ink-muted);--L:var(--obs-line);--LS:var(--obs-line-strong);--m:var(--font-mono);--e:cubic-bezier(.2,.8,.2,1);padding:104px 0 80px}
html:has(main.cl){scroll-padding-top:84px}
.cl [hidden],.obs-page .cl .obs-btn[hidden]{display:none!important}
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:26px}
.cl-head h1{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:.02em}
.cl-tools{display:flex;align-items:center;gap:10px}
.cl-count{display:flex;align-items:baseline;gap:6px;margin:0 6px 0 0;font-family:var(--m);font-variant-numeric:tabular-nums;font-size:13px;color:var(--u)}.cl-count b{font-size:16px;font-weight:500;color:var(--c);text-align:right}
.cl-btn,.cl-more,.cl-arrow,.cl-x{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cl-btn{display:inline-flex;align-items:center;gap:7px;min-width:40px;height:40px;padding:0 14px;border:1px solid var(--LS);border-radius:999px;background:#14141999;color:var(--s);font-size:13px;transition:color .2s,border-color .2s}
.cl-btn:hover,.cl-arrow:hover:not([aria-disabled=true]),.cl-x:hover{color:var(--ink);border-color:#75f6ff73}
.cl-i{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cl-btn[data-cl-mode] .cl-i+.cl-i,.cl-btn[data-cl-mode] span+span,.cl.is-list .cl-btn[data-cl-mode] .cl-i:first-child,.cl.is-list .cl-btn[data-cl-mode] span:first-of-type{display:none}
.cl.is-list .cl-btn[data-cl-mode] .cl-i+.cl-i,.cl.is-list .cl-btn[data-cl-mode] span+span{display:inline}.cl.is-list .cl-btn[data-cl-mode] .cl-i+.cl-i{display:block}
.cl.is-list .cl-count,.cl.is-list [data-cl-toc-open],.cl.is-list .cl-cta,.cl.is-list .cl-more{display:none}
.cl :focus-visible{outline:2px solid var(--c);outline-offset:3px}
/* 书页:桌面左图右文,≤899 上图下文。翻页模式下全部页叠在同一格(书页高 = 最高的一页,翻页条不跳);
   .is-off 不可见、截图不加载(图框固定 8:5,高度不变) */
.cl-book{position:relative;perspective:1600px;touch-action:pan-y}
.cl-page{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;scroll-margin-top:96px}
.cl.is-book .cl-book{display:grid}
.cl.is-book .cl-page{grid-area:1/1;min-height:min(440px,64vh);scroll-margin-top:220px}
.cl.is-book .cl-page.is-off{visibility:hidden}.cl.is-book .cl-page.is-off img{display:none}
.cl:not(.is-book) .cl-page{padding:64px 0;border-top:1px solid var(--L)}.cl:not(.is-book) .cl-cover{padding-top:8px;border-top:0}
.cl-fig{position:relative;margin:0;aspect-ratio:8/5;border:1px solid var(--L);border-radius:16px;background:radial-gradient(120% 95% at 50% 42%,#10161cd9,#0a0a0d 72%);overflow:hidden}
.cl-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 截图按原始比例嵌在 8:5 图框中央 */
.cl-fig--shot{display:flex;align-items:center;justify-content:center;padding:clamp(10px,3%,20px)}
.cl-fig--shot img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:8px}
.cl-fig .k{fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cl-fig .k9{fill:#75f6ff1a}
.cl-fig .w{fill:none;stroke:#f4f6f866;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.cl-fig .f{fill:none;stroke:#f4f6f821;stroke-width:1;stroke-linejoin:round}
.cl-fig .thin{stroke:#75f6ff7a;stroke-width:.7}
.cl-fig .d{fill:#d9fdff}.cl-fig .dc{fill:var(--c)}.cl-fig .dd{fill:none;stroke:#d9fdff;stroke-width:5.2;stroke-linecap:round}.cl-fig .o{fill:none;stroke:#f4f6f873;stroke-width:1}.cl-fig .o2{opacity:.6}.cl-fig .o3{opacity:.35}.cl-fig .dotf{fill:var(--blue,#11b3ef)}
/* 绘制:翻页模式的当前页播一次,≤1.55s;其余情形直接是画好的样子 */
@keyframes cl-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes cl-pop{from{opacity:0;transform:scale(.2)}}
@keyframes cl-fade{from{opacity:0;transform:scale(.96)}}
.cl.is-book .cl-page.is-cur .cl-fig path{animation:cl-draw 1.1s var(--e) calc(var(--i,0)*var(--st,70ms)) both}
.cl.is-book .cl-page.is-cur .cl-fig circle,.cl.is-book .cl-page.is-cur .cl-fig .dotf,.cl.is-book .cl-page.is-cur .cl-fig .dd{animation:cl-pop .5s var(--e) calc(var(--i,0)*var(--st,70ms)) both;transform-box:fill-box;transform-origin:center}
.cl.is-book .cl-page.is-cur .cl-fig--shot img{animation:cl-fade .5s var(--e) both}
/* 翻页:出页 0.2s 先走,入页晚 0.08s 再进 */
@keyframes cl-in-f{from{opacity:0;transform:translateX(24px) rotateY(-5deg)}}
@keyframes cl-in-b{from{opacity:0;transform:translateX(-24px) rotateY(5deg)}}
@keyframes cl-out-f{to{opacity:0;transform:translateX(-24px) rotateY(5deg)}}
@keyframes cl-out-b{to{opacity:0;transform:translateX(24px) rotateY(-5deg)}}
.cl-page.is-in-f{animation:cl-in-f .32s var(--e) .08s both;transform-origin:0 50%}.cl-page.is-in-b{animation:cl-in-b .32s var(--e) .08s both;transform-origin:100% 50%}
.cl-page.is-out-f,.cl-page.is-out-b{pointer-events:none}
.cl-page.is-out-f{animation:cl-out-f .2s ease-in both;transform-origin:100% 50%}.cl-page.is-out-b{animation:cl-out-b .2s ease-in both;transform-origin:0 50%}
/* 文字 */
.cl-text{min-width:0;max-width:560px}
.cl-text h2{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.28;font-weight:600;letter-spacing:.01em}.cl-text h2:focus,.cl-lede:focus{outline:none}.cl-text h2:focus-visible,.cl-lede:focus-visible{outline:none;text-decoration:underline 2px var(--c);text-underline-offset:7px}
.cl-date{margin:10px 0 0;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--c)}.cl-dev{color:var(--u)}.cl-dev::before{content:"\00b7";margin:0 8px}
.cl-lead{margin:18px 0 0;font-size:16px;line-height:1.8;color:var(--s)}
.cl-items{display:grid;gap:10px;list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--L)}
.cl-items li{display:grid;grid-template-columns:5.8em minmax(0,1fr);gap:12px;font-size:14px;line-height:1.65;color:var(--s)}
.cl-items time,.cl-toc a time{padding-top:1px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--u);white-space:nowrap}
.cl-more,.cl-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:14px;padding:0 2px;border:0;background:none;color:var(--c);font-size:14px;text-decoration:none}
.cl-more .cl-i,.cl-link .cl-i{transition:transform .25s var(--e)}.cl-more:hover .cl-i,.cl-link:hover .cl-i{transform:translateX(3px)}
/* 封面与寄语(封面按钮用全站 .obs-btn) */
.cl-lede{margin:0;font-size:clamp(19px,1.9vw,24px);line-height:1.6;font-weight:500;color:var(--ink);text-wrap:balance}
.cl-span{margin:14px 0 0;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--u)}
.cl-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.cl-cta .obs-btn{flex:none;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer}
.cl-go-at{font-family:var(--m);font-size:13px;color:var(--c)}.cl-go-at::before{content:"\00b7";margin:0 8px 0 2px;color:var(--u)}
.cl-now-h{margin:26px 0 0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--u)}
.cl-now{display:grid;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.cl-now li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--s)}
.cl-now li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;box-sizing:border-box;border:1px solid #f4f6f88c;border-radius:50%}
.cl-line{margin:26px 0 0;font-size:18px;line-height:1.6;font-weight:500;color:var(--ink)}
.cl-link{margin-top:10px}
/* 目录:文档流中的 <nav>;翻页模式下移进 .cl-dlg */
.cl-toc{display:block}
.cl:not(.is-book) .cl-toc{padding:56px 0 8px;border-top:1px solid var(--L)}
.cl-dlg{width:min(560px,calc(100vw - 32px));max-height:min(80vh,760px);margin:auto;padding:0;border:1px solid var(--LS);border-radius:16px;background:#0e0e12f7;color:var(--ink);box-shadow:0 30px 80px #000000b3;overflow:auto;overscroll-behavior:contain}
.cl-dlg:not([open]){display:none}.cl-dlg[open]{position:fixed;inset:0;z-index:60}
.cl-dlg::backdrop{background:#050506b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cl-dlg .cl-toc-in{padding:20px 24px 24px}
.cl-toc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.cl-toc h2{margin:0;font-size:17px;font-weight:600}
.cl-x{display:none;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--LS);border-radius:50%;background:transparent;color:var(--s)}.cl-dlg .cl-x{display:grid}
.cl-toc-l,.cl-toc-l ol{list-style:none;margin:0;padding:0}.cl-toc-l{margin-top:12px}
.cl:not(.is-book) .cl-toc-l{columns:2 22em;column-gap:56px}.cl-toc-l>li{break-inside:avoid}
.cl-toc-m{margin:16px 0 4px;font-size:12.5px;font-weight:500;color:var(--u)}
.cl-toc a{display:grid;grid-template-columns:5.8em minmax(0,1fr);gap:10px;margin:0 -10px;padding:8px 10px;border-radius:8px;font-size:14px;line-height:1.5;color:var(--s);text-decoration:none}
.cl-toc-e a{display:block;margin-top:10px}
.cl-toc a:hover{background:#ffffff0a;color:var(--ink)}.cl-toc a[aria-current]{background:#75f6ff12;color:var(--ink)}
/* 翻页条;≤719 进度点换成进度线 */
.cl-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px}
.cl-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--LS);border-radius:50%;background:#14141999;color:var(--s);transition:color .2s,border-color .2s}
.cl-arrow .cl-i{width:18px;height:18px}.cl-arrow[aria-disabled=true]{opacity:.32;cursor:default}
.cl-dots{display:flex;align-items:center;gap:9px}
.cl-dots i{display:block;width:7px;height:7px;box-sizing:border-box;border:1px solid #f4f6f866;border-radius:50%;cursor:pointer;transition:transform .25s var(--e),background .25s,border-color .25s}
.cl-dots i.is-seen{border-color:transparent;background:#f4f6f866}.cl-dots i.is-cur{border-color:transparent;background:var(--c);transform:scale(1.35)}
@media(max-width:899px){.cl-page{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}.cl.is-book .cl-page{min-height:0}.cl-text{max-width:none}.cl-fig{width:100%;max-width:600px}}
@media(max-width:719px){.cl{padding-top:86px}.cl-head h1{font-size:18px}.cl-lead{font-size:15px}.cl-dots{position:relative;flex:1;max-width:260px;height:2px;gap:0;background:#f4f6f866;border-radius:2px}.cl-dots i{display:none}
.cl-dots::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--clp,0)*100%);border-radius:2px;background:var(--c);transition:width .3s var(--e)}}
/* ≤479:「以列表查看」只留图标,「目录」保留文字 */
@media(max-width:479px){.cl-tools .cl-btn[data-cl-mode]{width:40px;padding:0;justify-content:center}.cl-tools .cl-btn[data-cl-mode] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cl-items li,.cl-toc a{grid-template-columns:5.2em minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.cl .cl-page,.cl .cl-fig *,.cl .cl-fig img{animation:none!important}.cl-dots i,.cl-dots::before,.cl-more .cl-i,.cl-link .cl-i{transition:none}}
@media(forced-colors:active){.cl-dots i.is-cur,.cl-fig .d,.cl-fig .dc,.cl-fig .dotf{forced-color-adjust:none;background:CanvasText;fill:CanvasText}.cl-fig .k,.cl-fig .w,.cl-fig .o,.cl-fig .dd{stroke:CanvasText}.cl-cta .obs-btn{border:1px solid CanvasText}}
@media print{.cl-tools,.cl-nav,.cl-cta,.cl-more,.cl-x{display:none!important}.cl.is-book .cl-book{display:block}.cl.is-book .cl-page.is-off{visibility:visible}.cl.is-book .cl-page.is-off img{display:block}.cl-page{break-inside:avoid}.cl-fig *{animation:none!important}}