@font-face{font-family:"Xunguang Serif SC";src:url("../assets/fonts/XunguangSerifSC-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Xunguang Serif SC";src:url("../assets/fonts/XunguangSerifSC-Medium.woff") format("woff");font-style:normal;font-weight:500;font-display:swap}
.zhao-preview{margin:0;background:radial-gradient(1200px 640px at 50% -10%,#182019 0%,#0b100e 62%) fixed,#0b100e;color:#eee6d4;font-family:"Microsoft YaHei",system-ui,sans-serif;color-scheme:dark}
.zhao-preview *,.zhao-story *{box-sizing:border-box}
.zhao-preview-header{max-width:1600px;margin:auto;padding:14px clamp(20px,4vw,64px) 0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.zhao-preview-brand{display:grid;gap:7px;min-width:0}
.zhao-preview-brand a{font-family:"Xunguang Serif SC","SimSun",serif;text-decoration:none;color:#ded1b4;letter-spacing:.16em;font-size:18px}
.zhao-preview-brand a span{font:12px "Microsoft YaHei",sans-serif;letter-spacing:.1em;color:#aab9b5}
.zhao-preview-note{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;color:#c9b183}
.zhao-preview-note::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:#c9b183;box-shadow:0 0 0 4px #c9b1831f}
#zhao-motion{border:1px solid #77715c66;background:#ffffff08;color:#d6c9ad;min-height:44px;padding:8px 14px;font:12px/1 "Microsoft YaHei",sans-serif;letter-spacing:.1em;cursor:pointer;flex:none}
#zhao-motion:hover{border-color:#c9b18366;color:#f2e6c9}
.zhao-skip{position:absolute;top:0;left:20px;transform:translateY(-120%);z-index:6;background:#eee4d0;color:#15272b;padding:12px}
.zhao-skip:focus{transform:none}
.zhao-story{--zhao-gold:#c9b184;--zhao-white:#eee7d8;--zhao-serif:"Xunguang Serif SC","Source Han Serif SC","Noto Serif SC","SimSun",serif;--zhao-ease:cubic-bezier(.2,.65,.2,1);color:var(--zhao-white);font-family:"Microsoft YaHei",system-ui,sans-serif;position:relative;max-width:1600px;margin:auto;isolation:isolate}
.zhao-story [hidden]{display:none!important}
.zhao-story button,.zhao-story input,.zhao-story a{font:inherit}
.zhao-story button{cursor:pointer}
.zhao-story button:focus-visible,.zhao-story input:focus-visible,.zhao-story a:focus-visible,.zhao-preview :focus-visible{outline:2px solid #e5c98f;outline-offset:4px}
.zhao-lookback:focus,.zhao-lookback:focus-visible{outline:none}
.zhao-story button:active{transform:translateY(1px)}
.zhao-heading{padding:14px clamp(20px,5vw,80px) 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.zhao-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.22em;color:#b7ab8c}
.zhao-heading h1{margin:0;font:500 clamp(34px,3.4vw,50px)/1.22 var(--zhao-serif);letter-spacing:.16em;text-wrap:balance}
.zhao-lede{max-width:28em;margin:0 0 6px;font-size:14px;line-height:1.9;letter-spacing:.08em;color:#aeb9ae;text-align:right}

/* 主画面：完整等比呈现工笔旧绢，不裁掉两端的琴与鹤。 */
.zhao-stage{--zhao-frame-h:clamp(240px,calc(100dvh - 330px),720px);margin:0 clamp(12px,2vw,32px);display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.zhao-frame{position:relative;width:min(100%,calc(var(--zhao-frame-h) * 1.776833),1280px);aspect-ratio:1672/941;overflow:hidden;background:#d8cfb8;box-shadow:0 34px 90px -34px #000,0 0 0 1px #e8dcbd59;isolation:isolate;cursor:crosshair}
.zhao-story[data-state="preparing"] .zhao-frame,.zhao-story[data-state="intro"] .zhao-frame,.zhao-story[data-state="outro"] .zhao-frame,.zhao-story[data-state="source"] .zhao-frame{cursor:default}
.zhao-hold{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;filter:saturate(.5) contrast(.97) brightness(.99) blur(1.6px);transition:filter .16s linear}
.zhao-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .24s linear;pointer-events:none;background:transparent}
.zhao-video.is-visible{opacity:1}
.zhao-fibers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}
.zhao-veil-layer{transition:opacity .55s var(--zhao-ease);will-change:opacity}
.zhao-stage-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;padding:8px 14px;background:#131915c4;border:1px solid #ffffff1a;color:#f0e7d1;font-size:12px;letter-spacing:.13em;line-height:1.7;white-space:normal;text-align:center;pointer-events:none;backdrop-filter:blur(3px);max-width:calc(100% - 28px);transition:opacity .5s var(--zhao-ease),visibility .5s}
.zhao-story[data-complete="true"] .zhao-stage-hint{opacity:0;visibility:hidden}
.zhao-stage-verse{position:absolute;top:32%;right:25%;margin:0;writing-mode:vertical-rl;letter-spacing:.3em;font:400 clamp(16px,1.6vw,23px)/2.1 var(--zhao-serif);color:#2f3127;text-shadow:0 0 20px #f6eedb,0 0 9px #f6eedb,0 0 3px #fffdf4;opacity:0;transform:translateY(10px);transition:opacity .9s .3s,transform .9s .3s;pointer-events:none}
.zhao-story[data-complete="true"] .zhao-stage-verse{opacity:1;transform:none}
.zhao-stamp{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);writing-mode:vertical-rl;letter-spacing:.16em;color:#8c4434;font:500 12px/1.2 var(--zhao-serif);border:1px solid #8c443499;background:#f0e6cc2e;padding:6px 5px;pointer-events:none;opacity:.85}
.zhao-brush{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px;pointer-events:none;border:1px solid #2f3028c9;border-radius:50%;opacity:0;transition:opacity .15s;box-shadow:0 0 0 7px #f4ecd066,0 0 26px #fff7df8c}
.zhao-stage[data-dragging="true"]{touch-action:none}
.zhao-stage[data-dragging="true"] .zhao-brush{opacity:1}
.zhao-poster-fallback{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;background:#d8cfb8;color:#3b382c;font-size:14px;line-height:1.8;z-index:3}
.zhao-poster-fallback p{margin:0}
.zhao-media-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:min(340px,calc(100% - 32px));padding:20px;background:#101612ee;border:1px solid #d8c4954d;box-shadow:0 20px 50px #0008;text-align:center;backdrop-filter:blur(6px)}
.zhao-media-fallback p{margin:0 0 14px;font-size:14px;line-height:1.8;color:#efe6d2}
.zhao-media-fallback div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.zhao-media-fallback button{min-height:44px;padding:0 16px;background:transparent;border:1px solid #c9b18466;color:#e6d6b4;font-size:13px;cursor:pointer}

/* 操作区：原生滑块与按钮等价，完成或跳过后只推进一次。 */
.zhao-controls{padding:20px clamp(20px,5vw,80px) 34px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 36px;align-items:center}
.zhao-progress-caption{display:flex;justify-content:space-between;gap:16px;font-size:13px;line-height:1.8;color:#bcc6b8;margin-bottom:10px}
.zhao-progress-caption strong{font-weight:400;color:#dfccaa}
.zhao-progress-caption output{font-variant-numeric:tabular-nums;color:#9eac9d;white-space:nowrap}
.zhao-range{display:block;width:100%;height:30px;accent-color:#c4ad7a;cursor:ew-resize;margin:0}
.zhao-range:disabled{cursor:default;opacity:.6}
.zhao-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.zhao-actions button{border:0;border-bottom:1px solid #a991615e;padding:10px 0;min-height:44px;background:transparent;color:#cfbc97;font-size:13px;letter-spacing:.08em;transition:color .2s,border-color .2s}
.zhao-actions button:hover{color:#fff0ca;border-color:#d0b67e}
.zhao-actions button:disabled{color:#75857c;border-color:transparent;cursor:default}
.zhao-control-help{grid-column:1/-1;font-size:12px;color:#93a399;margin:0;line-height:1.9;max-width:72em}
.zhao-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* 原文回望：镜头落定后再出现，不自动赶走读者。 */
.zhao-lookback{margin:0 clamp(20px,5vw,80px) 40px;padding:34px 0 14px;border-top:1px solid #8b977e40;display:grid;grid-template-columns:1fr 1.7fr;gap:48px;animation:zhao-appear .6s ease both}
.zhao-lookback h2{font:400 clamp(24px,2.4vw,30px)/1.6 var(--zhao-serif);margin:0 0 14px;letter-spacing:.12em}
.zhao-lookback blockquote{font:400 clamp(23px,2.2vw,27px)/1.9 var(--zhao-serif);margin:12px 0 8px;color:#e4cfaa}
.zhao-lookback p{font-size:17px;line-height:2;max-width:38em;margin:0 0 16px;color:#c5cfbf}
.zhao-lookback .zhao-source{font-size:13px;line-height:1.9;color:#a2b2a9}
.zhao-lookback a{color:#d2bd92;text-underline-offset:5px}
.zhao-full-line{font-family:var(--zhao-serif)!important;color:#e1d7c0!important;letter-spacing:.08em}
.zhao-media-note{color:#c4ad84!important}
.zhao-boundary{margin-top:16px;padding-top:10px;border-top:1px solid #b19a682e;font-size:11px!important;line-height:1.85;color:#7f8f84!important}
.zhao-story[data-reduced="true"] *,.zhao-story[data-reduced="true"] *::before{animation:none!important;transition:none!important}
@keyframes zhao-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .zhao-preview-header{padding:12px 18px 0;gap:12px}
  .zhao-preview-brand a{font-size:16px}
  .zhao-preview-brand a span{display:none}
  .zhao-preview-note{font-size:11px;letter-spacing:.08em}
  #zhao-motion{padding:8px 10px;font-size:11px}
  .zhao-heading{padding:14px 18px;display:block}
  .zhao-heading h1{font-size:34px;letter-spacing:.14em}
  .zhao-lede{margin:8px 0 0;text-align:left;font-size:13px;letter-spacing:.04em}
  .zhao-stage{--zhao-frame-h:auto;margin:0 10px}
  .zhao-frame{width:100%}
  .zhao-stage-hint{top:9px;padding:6px 9px;font-size:10px;letter-spacing:.05em}
  .zhao-stage-verse{top:33%;right:24%;font-size:14px;letter-spacing:.2em}
  .zhao-stamp{bottom:9px;padding:4px;font-size:10px}
  .zhao-controls{grid-template-columns:1fr;gap:10px;padding:16px 18px 30px}
  .zhao-actions{gap:14px;justify-content:space-between}
  .zhao-actions button{flex:1 1 auto;text-align:left}
  .zhao-control-help{font-size:12px}
  .zhao-lookback{grid-template-columns:1fr;gap:20px;margin:0 18px 34px;padding-top:24px}
  .zhao-lookback h2{font-size:24px}
  .zhao-lookback blockquote{font-size:23px}
  .zhao-lookback p{font-size:17px}
  .zhao-lookback .zhao-source{font-size:12.5px}
}

/* ---------- 主站嵌入：只作用于 #story-zhaobian 宿主，独立原型保持原样 ---------- */
#voyage-story[data-story-kind="zhao-bian"] { --story-top: 76px; padding-top: 4px; padding-bottom: 12px; }
#voyage-story[data-story-kind="zhao-bian"] #story-frame { display: none; }
#voyage-story[data-story-kind="zhao-bian"] .v-source-note { display: none; }
#voyage-story[data-story-kind="zhao-bian"] .v-story-bottom { grid-template-columns: 1fr; margin-top: 12px; }
#voyage-story[data-story-kind="zhao-bian"] .v-story-actions { justify-self: end; }
#story-zhaobian { margin: 0; }
#story-zhaobian[hidden] { display: none !important; }
#story-zhaobian .zhao-story { max-width: none; margin: 0; }
#story-zhaobian .zhao-heading { display: none; }
#story-zhaobian .zhao-stage { --zhao-frame-h: clamp(220px, calc(100vh - 330px), 560px); margin: 0; }
#story-zhaobian .zhao-frame { width: min(100%, calc(var(--zhao-frame-h) * 1.776833), 1080px); }
#story-zhaobian .zhao-controls { padding: 12px 0 16px; gap: 10px 28px; }
/* 原生滑杆的视觉轨道不变，仅把触达高度补到 44px；独立原型保持原尺寸。 */
#story-zhaobian .zhao-range { height: 44px; }
#story-zhaobian .zhao-control-help { display: none; }
#story-zhaobian .zhao-lookback { margin: 14px 0 20px; padding: 22px 0 10px; }
#story-zhaobian .v-zhaobian-fallback { margin: 24px 0; padding: 28px 20px; border: 1px solid #8b977e40; color: #c5cfbf; font-size: 17px; line-height: 1.9; text-align: center; }
@media (max-width: 760px) {
  #voyage-story[data-story-kind="zhao-bian"] { --story-top: 78px; padding-top: 10px; padding-bottom: 30px; }
  #story-zhaobian .zhao-controls { padding: 12px 0 6px; }
  #story-zhaobian .zhao-lookback { margin: 12px 0 24px; padding-top: 20px; }
}