:root { --graphic-nav-top:132px; --graphic-nav-height:64px; }
.graphic-gallery .gallery-toolbar { position:sticky; top:var(--graphic-nav-top); z-index:7; padding:0 0 6px; background:#f7fafff5; backdrop-filter:blur(12px); border-bottom:1px solid #b6cfdf; box-shadow:0 8px 14px #6e8b9e0c; }
.graphic-gallery { scroll-margin-top:var(--graphic-nav-top); }
.is-brand-view .scroll-index { top:calc(var(--graphic-nav-top) + var(--graphic-nav-height) + 12px); }
.is-brand-view .brand-chapter { scroll-margin-top:calc(var(--graphic-nav-top) + var(--graphic-nav-height) + 75px); }
.graphic-next-section { display:block; margin:45px auto 20px; min-height:48px; padding:12px 24px; border:1px dashed #b88caa; background:#f8eef5; color:#97557e; border-radius:4px; font-size:13px; }
.gesture-replay { flex:0 0 30px; width:30px; height:30px; margin-left:12px; border:1px solid #aac2d3; border-radius:50%; background:#f9fcff; color:#7b6591; font:16px Georgia,serif; }
.works-toolbar>span { margin-left:auto; }
.interaction-cue { display:none; }
.gesture-guide { position:fixed; inset:0; z-index:88; pointer-events:none; display:grid; place-items:center; background:transparent; }
.gesture-guide[hidden] { display:none!important; }
.gesture-guide-panel { position:relative; pointer-events:auto; width:min(340px,calc(100vw - 48px)); padding:24px 24px 18px; text-align:center; background:transparent; border:0; box-shadow:none; text-shadow:0 1px 3px #fff,0 0 8px #fff; animation:gesture-appear .25s ease-out; }
.gesture-dismiss { position:absolute; top:3px; right:3px; width:40px; height:40px; border:0; background:none; color:#926180; font-size:24px; }
.gesture-demonstration { position:relative; width:210px; height:132px; max-width:100%; margin:5px auto 18px; }
.gesture-demonstration>img { position:absolute; width:70px; height:70px; left:70px; top:30px; z-index:2; filter:drop-shadow(1px 4px 3px #496d8026); animation:gesture-down 1.65s ease-in-out 2; }
.gesture-path { position:absolute; left:103px; top:8px; width:1px; height:105px; border-left:2px dashed #d098bd; }
.gesture-path::after { content:""; position:absolute; bottom:0; left:-6px; width:8px; height:8px; border-right:2px solid #c282a9; border-bottom:2px solid #c282a9; transform:rotate(45deg); }
.gesture-demonstration>i { position:absolute; width:35px; height:35px; top:20px; left:86px; border:1px solid #99c9df; border-radius:50%; animation:gesture-ripple 1.65s ease-out 2; }
.gesture-title { color:#8e4d7f; font:20px/1.6 "Songti SC",serif; margin:0 0 8px; }
.gesture-alternative { color:#52758c; font:12px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; margin:0; }
.gesture-understood { min-height:44px; margin-top:16px; padding:8px 22px; color:#8f547d; border:0; border-bottom:1px solid #c49ab5; background:none; font-size:12px; }
.gesture-guide button:focus-visible,.gesture-replay:focus-visible { outline:2px solid #a84881; outline-offset:3px; }
[data-gesture="horizontal"] .gesture-path,[data-gesture="drag"] .gesture-path { width:150px; height:1px; border-left:0; border-top:2px dashed #d098bd; left:28px; top:64px; }
[data-gesture="horizontal"] .gesture-path::after,[data-gesture="drag"] .gesture-path::after { left:auto; right:0; top:-6px; transform:rotate(-45deg); }
[data-gesture="horizontal"] .gesture-demonstration>img { animation-name:gesture-side; }
[data-gesture="drag"] .gesture-demonstration>img { animation-name:gesture-drag; }
[data-gesture="tap"] .gesture-path { width:68px; height:68px; left:70px; top:20px; border:1px solid #bdcfe0; border-radius:50%; }
[data-gesture="tap"] .gesture-path::after { display:none; }
[data-gesture="tap"] .gesture-demonstration>img { animation-name:gesture-tap; }
@keyframes gesture-appear { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes gesture-down { 0%,20% { translate:0 -23px; opacity:0; } 30% { opacity:1; } 75% { opacity:1; translate:0 28px; } 100% { opacity:0; translate:0 28px; } }
@keyframes gesture-side { 0%,20% { translate:55px 0; opacity:0; } 30% { opacity:1; } 75% { opacity:1; translate:-55px 0; } 100% { opacity:0; translate:-55px 0; } }
@keyframes gesture-drag { 0%,20% { translate:-50px 0; opacity:0; } 30% { opacity:1; } 75% { opacity:1; translate:50px 0; } 100% { opacity:0; translate:50px 0; } }
@keyframes gesture-tap { 0%,100% { scale:1; } 40%,55% { scale:.83; } 75% { scale:1; } }
@keyframes gesture-ripple { 0%,30% { scale:.4; opacity:0; } 40% { opacity:.7; } 80%,100% { scale:1.6; opacity:0; } }
@media(max-width:820px) { :root { --graphic-nav-top:126px; } .graphic-gallery .gallery-count { display:none; } .gesture-replay { flex-basis:28px; width:28px; height:28px; } }
@media(max-height:500px) { .gesture-guide-panel { padding:12px 24px; } .gesture-demonstration { height:95px; margin-bottom:0; scale:.75; transform-origin:top center; } .gesture-title { font-size:17px; } .gesture-understood { margin:5px 0 0; } }
@media(prefers-reduced-motion:reduce) { .gesture-guide-panel,.gesture-demonstration>img,.gesture-demonstration>i { animation:none!important; } }