/* 整屏阅读层独立于旧小弹窗。原展区DOM保留，返回时不丢失当前位置。 */
/* Chromium/WebKit原生控件的兼容补充；只隐藏详情播放器的全屏按钮。 */
.wd-video::-webkit-media-controls-fullscreen-button{display:none}
body[data-work-detail]{overflow:hidden}
body[data-work-detail] :is(#guide,#guide-chat,#feedback-thanks,#cursor-glow){visibility:hidden}
#work-dialog.work-detail{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-sizing:border-box;box-shadow:none;overflow:auto;overscroll-behavior:contain;background:#faf7ee;color:#35474e;font-family:"Noto Serif SC","Songti SC","SimSun",serif;scrollbar-gutter:stable;overflow-anchor:none;transform-origin:left center}
#work-dialog.work-detail::backdrop{background:#faf7ee;backdrop-filter:none}
#work-dialog.work-detail #dialog-content{padding:0;max-width:none}
#work-dialog.work-detail #close-dialog{position:fixed;inset:12px auto auto 28px;z-index:60;width:auto;height:44px;min-height:44px;padding:8px 15px;border:1px solid #b5a48580;border-radius:3px;background:#fcf9f0ee;color:#526978;font-family:inherit;font-size:14px;line-height:1.5;letter-spacing:.03em;cursor:pointer}
.work-detail *{box-sizing:border-box}
.work-detail button,.work-detail summary{font-family:inherit;-webkit-tap-highlight-color:transparent}
.work-detail button{cursor:pointer;color:inherit}
.work-detail button:focus-visible,.work-detail summary:focus-visible{outline:2px solid var(--wd-accent);outline-offset:4px}
.work-detail button:disabled{cursor:default}
.wd-page{--wd-accent:#6b8990;--wd-ink:#354f5a;--wd-muted:#72817f;--wd-line:#b6a37e55;--wd-paper:#fffdf6;--wd-player-height:clamp(230px,43vh,410px);--wd-header:68px;position:relative;min-height:100dvh;isolation:isolate;background:var(--wd-ground,#faf7ee);color:var(--wd-ink);padding-bottom:36px}
.wd-page:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("../../../assets/detail-paper-grain.svg");opacity:.45}
.wd-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:var(--wd-header);padding:10px 32px 10px 220px;border-bottom:1px solid var(--wd-line);background:#faf7eef2;backdrop-filter:blur(12px);font-size:13px;letter-spacing:.06em}
.wd-topbar-label>span{margin:0 10px;color:#b19c73}
.wd-work-switch{display:flex;align-items:center;gap:15px;font:12px Georgia,serif;white-space:nowrap}
.wd-work-switch button{width:40px;height:40px;border:1px solid var(--wd-line);border-radius:50%;background:transparent;font-size:18px;transition:background .2s}
.wd-work-switch button:hover{background:#b7a27918}
.wd-decoration{position:fixed;right:-100px;top:110px;width:min(50vw,640px);pointer-events:none;color:var(--wd-accent);opacity:.13;transition:opacity .4s}
.wd-decoration svg{display:block;width:100%;stroke:currentColor;stroke-width:.55}
.is-playing .wd-decoration{opacity:.035}
.wd-intro{position:relative;max-width:1140px;margin:auto;padding:42px 28px 28px}
.wd-intro-kicker{display:flex;align-items:center;gap:20px;font:11px/1.6 Georgia,serif;letter-spacing:.18em;color:var(--wd-muted)}
.wd-intro-kicker>span{font:12px/1.7 "Noto Serif SC",serif;letter-spacing:.08em;border:1px solid var(--wd-line);padding:2px 8px}
.wd-intro h1{margin:14px 0 10px;font-weight:400;font-size:clamp(30px,3.5vw,48px);line-height:1.4;letter-spacing:.1em;color:var(--wd-ink)}
.wd-intro>p{font-size:15px;line-height:1.8;margin:0;color:var(--wd-muted)}
.wd-work-tag{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--wd-muted);font-size:12px;letter-spacing:.06em}
.wd-work-tag i{width:22px;height:1px;background:var(--wd-line)}
/* 单个媒体容器始终在相同DOM内，滚动时只改变尺寸，不重载视频。 */
.wd-media-dock{position:sticky;top:var(--wd-header);z-index:20;display:flex;justify-content:center;align-items:center;gap:24px;height:var(--wd-player-height);padding:12px 24px;background:var(--wd-dock,#faf7eef2);transition:height .32s ease,padding .32s ease;overflow:hidden}
.wd-player-frame{position:relative;width:min(100%,calc((var(--wd-player-height) - 24px)*1.7778));height:100%;flex-shrink:0;border:1px solid #c3b08d88;background:#ebe8df;box-shadow:0 8px 26px #5b5b3c10;overflow:hidden;transition:width .32s ease}
.work-detail .wd-player-frame .art{display:block;width:100%;height:100%;aspect-ratio:auto;margin:0}
.wd-video{display:block;width:100%;height:100%;object-fit:contain;background:#111813}
.wd-media-preview{width:100%;height:100%;position:relative}
.wd-media-preview>.art{opacity:.65}
.wd-media-pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:15px;background:linear-gradient(90deg,#fffaf17a,#fffaf1af,#fffaf17a);text-align:center}
.wd-play-outline{font:40px/1 Georgia,serif;color:var(--wd-accent)}
.wd-media-pending strong{font-size:18px;font-weight:400;letter-spacing:.14em}
.wd-media-pending>span:not(.wd-play-outline){font-size:13px;color:#52686b;line-height:1.8}
.wd-media-pending button{border:0;background:none;border-bottom:1px solid #9f94715e;padding:8px 5px;font-size:13px;min-height:36px}
.wd-dock-caption{display:none;max-width:220px}
.wd-dock-caption>span{font:10px Georgia,serif;letter-spacing:.18em;color:var(--wd-muted)}
.wd-dock-caption strong{display:block;margin:9px 0;font-size:18px;font-weight:400}
.wd-dock-caption p{font-size:13px;line-height:1.8;color:var(--wd-muted);margin:0}
.is-compact{--wd-player-height:180px}
.is-compact .wd-dock-caption{display:block}
.is-compact .wd-play-outline{font-size:26px}
.is-compact .wd-media-pending>span:not(.wd-play-outline),.is-compact .wd-media-pending>button{display:none}
.is-jumping :is(.wd-media-dock,.wd-player-frame,.wd-section-nav){transition:none}
.is-media-hidden{--wd-player-height:0px}
.is-media-hidden .wd-media-dock{padding:0;visibility:hidden}
.wd-section-nav{position:sticky;top:calc(var(--wd-header) + var(--wd-player-height));z-index:25;display:flex;gap:5px;align-items:center;justify-content:center;min-height:60px;padding:8px 24px;border-block:1px solid var(--wd-line);background:var(--wd-paper);transition:top .32s ease}
.wd-nav-links{display:flex;align-items:center;min-width:0;gap:5px}
.wd-section-nav button{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:42px;white-space:nowrap;font-size:14px;padding:8px 16px;background:transparent;border:0;border-bottom:1px solid transparent;transition:color .2s,background .2s}
.wd-section-nav button>span{font:10px Georgia,serif;color:var(--wd-muted)}
.wd-section-nav button[aria-current]{color:var(--wd-accent);border-bottom-color:var(--wd-accent);background:#b8a57a0b}
.wd-section-nav .wd-collapse{margin-left:15px;color:var(--wd-muted);font-size:12px;padding-inline:10px}
.wd-reading{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:45px;max-width:1140px;margin:0 auto;padding:48px 28px}
.wd-reading-mark{align-self:start;position:sticky;top:calc(var(--wd-header) + var(--wd-player-height) + 105px);display:flex;flex-direction:column;align-items:center;gap:22px;color:var(--wd-accent);opacity:.7}
.wd-reading-mark svg{width:105px;stroke:currentColor;stroke-width:.8}
.wd-reading-mark>span{writing-mode:vertical-rl;letter-spacing:.23em;font:10px/1.8 Georgia,serif;min-height:110px}
.wd-sections{min-width:0}
.wd-section{position:relative;padding:0 0 46px;margin:0 0 44px;border-bottom:1px solid var(--wd-line)}
.wd-section:last-child{margin-bottom:0}
.wd-section-heading{display:flex;gap:18px;align-items:center;margin-bottom:25px}
.wd-section-number{display:grid;place-items:center;min-width:42px;height:42px;font:17px Georgia,serif;color:var(--wd-accent);border:1px solid var(--wd-line);border-radius:50%}
.wd-section-heading p{font:10px Georgia,serif;letter-spacing:.2em;color:var(--wd-muted);margin:0 0 7px}
.wd-section h2{font-size:25px;letter-spacing:.08em;font-weight:400;line-height:1.5;margin:0}
.wd-section h2:focus{outline:none}
.wd-lead{font-size:clamp(19px,2vw,24px);line-height:1.9;max-width:700px;color:var(--wd-ink);margin:15px 0}
.wd-body-text{font-size:15px;color:#667775;line-height:2;margin:12px 0 20px}
.wd-intent-note{display:flex;gap:22px;border-left:2px solid var(--wd-accent);padding:13px 20px;background:#c5b59610;margin:24px 0}
.wd-intent-note>span{flex-shrink:0;font-size:13px;color:var(--wd-accent);padding-top:3px}
.wd-intent-note p{margin:0;font-size:15px;line-height:1.9}
.wd-sample-note{font-size:13px;line-height:1.9;color:var(--wd-muted);margin-top:28px}
.wd-process-layout{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1fr);gap:30px}
.wd-image-card{margin:0;min-width:0}
.wd-image-card>button{position:relative;display:block;width:100%;border:1px solid var(--wd-line);padding:10px;background:var(--wd-paper);box-shadow:2px 4px 9px #76694b0c;transition:transform .2s,box-shadow .2s}
.wd-image-card>button:hover{transform:translateY(-3px);box-shadow:2px 8px 18px #76694b16}
.wd-image-art{display:block;aspect-ratio:1.3;overflow:hidden}
.work-detail .wd-image-art .art{display:block;width:100%;height:100%;aspect-ratio:auto}
.wd-image-zoom{position:absolute;right:14px;bottom:14px;border:1px solid var(--wd-line);width:27px;height:27px;background:#fffdf5cf;display:grid;place-items:center;font-size:15px}
.wd-image-card figcaption{font-size:13px;color:var(--wd-muted);line-height:1.8;padding-top:10px}
.wd-sketch{filter:grayscale(1);opacity:.65}
.wd-step-list{position:relative}
.wd-step{position:relative;display:flex;gap:15px;padding-bottom:23px}
.wd-step:not(:last-child):before{content:"";position:absolute;left:15px;top:30px;bottom:0;border-left:1px dashed var(--wd-line)}
.wd-step-dot{z-index:1;flex-shrink:0;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--wd-line);background:var(--wd-paper);border-radius:50%;font:11px Georgia,serif;color:var(--wd-accent)}
.wd-step h3{margin:3px 0 8px;font-size:16px;font-weight:400}
.wd-step p{margin:0;font-size:14px;line-height:1.9;color:#687b7a}
.wd-prompt{border:1px solid var(--wd-line);background:var(--wd-paper);margin:13px 0}
.wd-prompt summary{display:flex;align-items:center;gap:18px;list-style:none;padding:18px 20px;cursor:pointer;min-height:60px}
.wd-prompt summary::-webkit-details-marker{display:none}
.wd-prompt-index{font:12px Georgia,serif;color:var(--wd-muted)}
.wd-prompt summary strong{font-weight:400;font-size:16px}
.wd-prompt-plus{margin-left:auto;color:var(--wd-accent);transition:transform .2s}
.wd-prompt[open] .wd-prompt-plus{transform:rotate(45deg)}
.wd-prompt-body{padding:0 20px 18px}
.wd-prompt pre{font:14px/2 "Noto Serif SC",serif;white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px solid var(--wd-line);padding:18px 0 10px;margin:0;color:#536d72}
.wd-prompt-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.wd-prompt-actions button{display:flex;gap:20px;align-items:center;min-height:40px;padding:8px 13px;border:1px solid var(--wd-line);background:none;font-size:13px}
.wd-copy-status{font-size:13px;color:var(--wd-accent)}
.wd-revision blockquote{font-size:20px;line-height:1.9;margin:20px 0 30px;padding-left:24px;border-left:1px solid var(--wd-accent)}
.wd-compare-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.wd-compare-images img{display:block;max-width:100%;height:auto}
.wd-revision-record>p{font-size:15px;line-height:1.9}
.wd-shot-list{display:flex;gap:14px;overflow-x:auto;margin-top:24px;padding-bottom:8px}
.wd-shot-list button{display:grid;gap:12px;min-width:150px;min-height:110px;padding:16px;border:1px solid var(--wd-line);background:var(--wd-paper);text-align:left}
.wd-shot-list button span,.wd-shot-list button small{font-size:12px;color:var(--wd-muted)}
.wd-shot-list button strong{font-size:15px;font-weight:400}
.wd-shot-list button.is-current-shot{border-color:var(--wd-accent);box-shadow:inset 0 -2px var(--wd-accent)}
.wd-media-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:15px;text-align:center;background:#faf7eef5;font-size:15px}
.wd-media-error[hidden]{display:none}
.wd-media-error p{font-size:13px;line-height:1.8;margin:0}
.wd-media-error button{padding:8px 16px;border:1px solid var(--wd-line);background:var(--wd-paper);min-height:40px}
.wd-footer{max-width:1084px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 26px 30px;color:var(--wd-muted);font-size:14px}
.wd-footer button{border:1px solid var(--wd-line);padding:12px 20px;background:var(--wd-paper);font-size:14px;min-height:44px}
.work-detail .wd-image-dialog{position:fixed;inset:0;margin:auto;padding:36px 25px 20px;border:1px solid var(--wd-line);width:min(90vw,880px);height:auto;max-height:90dvh;max-width:none;background:var(--wd-paper);border-radius:0;overflow:auto;color:var(--wd-ink)}
.wd-image-dialog::backdrop{background:#233e4770;backdrop-filter:blur(6px)}
.wd-image-dialog>button{position:absolute;right:10px;top:6px;font-size:25px;background:none;border:0;min-width:40px;min-height:40px}
.wd-zoom-content .wd-image-art{aspect-ratio:1.6;max-height:65vh}
.work-detail .wd-zoom-content .art{height:100%;width:100%;aspect-ratio:auto}
.wd-zoom-caption{text-align:center;font-size:14px;margin:14px 0 0}
/* 手机保留可读字号。顶部媒体可收起，章节导航横向可滚动。 */
@media(max-width:700px){
  #work-dialog.work-detail #close-dialog{left:12px;font-size:13px;padding-inline:10px}
  .wd-page{--wd-player-height:clamp(180px,31vh,235px);--wd-header:66px}
  .wd-topbar{padding-left:170px;padding-right:12px}
  .wd-topbar-label{display:none}
  .wd-work-switch{margin-left:auto;gap:8px;font-size:11px}
  .wd-work-switch button{width:33px;height:38px}
  .wd-intro{padding:28px 22px 22px}
  .wd-intro-kicker{font-size:9px;letter-spacing:.07em;gap:12px}
  .wd-intro-kicker>span{font-size:11px;white-space:nowrap}
  .wd-intro h1{font-size:32px;letter-spacing:.06em}
  .wd-intro>p{font-size:14px}
  .wd-work-tag{font-size:11px}
  .wd-media-dock{padding:10px 18px;gap:0}
  .wd-player-frame{width:min(100%,calc((var(--wd-player-height) - 20px)*1.7778))}
  .wd-dock-caption,.is-compact .wd-dock-caption{display:none}
  .is-compact{--wd-player-height:130px}
  .is-compact .wd-media-pending strong{font-size:14px}
  .is-compact .wd-play-outline{font-size:22px}
  .is-media-hidden{--wd-player-height:0px}
  .wd-section-nav{justify-content:flex-start;gap:0;padding:6px 8px;min-height:54px}
  .wd-nav-links{flex:1;overflow-x:auto;scrollbar-width:none}
  .wd-section-nav button{font-size:13px;padding-inline:12px;flex-shrink:0;gap:6px}
  .wd-section-nav .wd-collapse{position:static;flex-shrink:0;margin:0 0 0 6px;padding-inline:10px;font-size:12px;border-left:1px solid var(--wd-line);background:var(--wd-paper)}
  .wd-reading{display:block;padding:32px 22px}
  .wd-reading-mark{display:none}
  .wd-section{padding-bottom:32px;margin-bottom:32px}
  .wd-section h2{font-size:23px}
  .wd-section-heading{gap:13px;margin-bottom:22px}
  .wd-section-number{min-width:36px;height:36px;font-size:15px}
  .wd-intent-note{display:block;padding:12px 15px}
  .wd-intent-note>span{display:block;margin-bottom:8px}
  .wd-process-layout{grid-template-columns:1fr;gap:24px}
  .wd-image-small{max-width:380px}
  .wd-prompt summary{padding:15px;gap:12px}
  .wd-prompt summary strong{font-size:15px}
  .wd-prompt-body{padding:0 15px 15px}
  .wd-compare-images{gap:12px}
  .wd-compare-images .wd-image-card>button{padding:6px}
  .wd-image-card figcaption{font-size:12px}
  .wd-revision blockquote{font-size:18px;padding-left:15px}
  .wd-footer{padding:0 22px 20px;font-size:13px}
  .wd-footer button{font-size:13px;padding-inline:12px}
  .wd-decoration{width:85vw;right:-100px;top:150px}
}
@media(max-height:560px){.wd-page{--wd-player-height:180px}.wd-page.is-compact{--wd-player-height:95px}.wd-page.is-media-hidden{--wd-player-height:0px}.wd-intro{padding-block:22px}.wd-media-pending>span:not(.wd-play-outline){display:none}.wd-section-nav{min-height:48px}}
.reduce-motion .work-detail *{scroll-behavior:auto!important;transition:none!important}
/* 游客在作品介绍后看见一张轻量邀请签，保留三种展区各自的配色。 */
.wd-access-invite{margin:clamp(32px,5vw,72px) 0;padding:clamp(22px,4vw,36px);border:1px solid currentColor;background:rgba(255,253,246,.55);color:inherit}
.wd-access-invite strong{font-size:clamp(18px,2vw,24px);font-weight:500;line-height:1.5}
.wd-access-invite p{font-size:15px;line-height:1.8;margin:10px 0 18px}
.wd-access-invite button{border:1px solid currentColor;background:transparent;color:inherit;padding:10px 18px;font:inherit;cursor:pointer}
.wd-access-invite button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.work-detail *{scroll-behavior:auto!important;transition:none!important}}