:root{
  --video-icon-volume-medium:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3.6%209.1h3.1l4-3.7c.57-.53%201.5-.12%201.5.66v11.88c0%20.78-.93%201.19-1.5.66l-4-3.7H3.6c-.72%200-1.3-.58-1.3-1.3v-3.2c0-.72.58-1.3%201.3-1.3Z%22%2F%3E%3Cpath%20d%3D%22M15%208.3a5.2%205.2%200%200%201%200%207.4%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-volume-low:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3.6%209.1h3.1l4-3.7c.57-.53%201.5-.12%201.5.66v11.88c0%20.78-.93%201.19-1.5.66l-4-3.7H3.6c-.72%200-1.3-.58-1.3-1.3v-3.2c0-.72.58-1.3%201.3-1.3Z%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-play:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M8.1%204.9c-.96-.56-2.16.14-2.16%201.25v11.7c0%201.11%201.2%201.81%202.16%201.25l10.14-5.85a1.45%201.45%200%200%200%200-2.5L8.1%204.9Z%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-pause:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%225.25%22%20y%3D%224.1%22%20width%3D%224.35%22%20height%3D%2215.8%22%20rx%3D%221.25%22%2F%3E%3Crect%20x%3D%2214.4%22%20y%3D%224.1%22%20width%3D%224.35%22%20height%3D%2215.8%22%20rx%3D%221.25%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-volume:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3.6%209.1h3.1l4-3.7c.57-.53%201.5-.12%201.5.66v11.88c0%20.78-.93%201.19-1.5.66l-4-3.7H3.6c-.72%200-1.3-.58-1.3-1.3v-3.2c0-.72.58-1.3%201.3-1.3Z%22%2F%3E%3Cpath%20d%3D%22M15%208.3a5.2%205.2%200%200%201%200%207.4m3.1-10.5a9.6%209.6%200%200%201%200%2013.6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-muted:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cdefs%3E%3Cmask%20id%3D%22video-muted-cut%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22m3.4%203.3%2017.2%2017.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%224.7%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M3.6%209.1h3.1l4-3.7c.57-.53%201.5-.12%201.5.66v11.88c0%20.78-.93%201.19-1.5.66l-4-3.7H3.6c-.72%200-1.3-.58-1.3-1.3v-3.2c0-.72.58-1.3%201.3-1.3Z%22%20mask%3D%22url(%23video-muted-cut)%22%2F%3E%3Cpath%20d%3D%22m3.4%203.3%2017.2%2017.4%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-fullscreen:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3.5%208.5v-5h5m7%200h5v5m0%207v5h-5m-7%200h-5v-5%22%2F%3E%3C%2Fsvg%3E');
  --video-icon-exit-fullscreen:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3.5%208.5h5v-5m7%200v5h5m0%207h-5v5m-7%200v-5h-5%22%2F%3E%3C%2Fsvg%3E');
}

#works .wg-image-button[data-video]::before{content:'';position:absolute;z-index:3;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:#292f35bd;pointer-events:none;transition:background-color 160ms}
#works .wg-image-button[data-video]::after{content:'';position:absolute;z-index:4;left:50%;top:50%;width:30px;height:30px;transform:translate(-45%,-50%);background:#fff;-webkit-mask:var(--video-icon-play) center/contain no-repeat;mask:var(--video-icon-play) center/contain no-repeat;pointer-events:none}
#works .wg-image-button[data-video]:hover::before{background:#292f35e0}
#works .wg-grid-card[data-video] .wg-grid-image{position:relative}
#works .wg-grid-card[data-video] .wg-grid-image::after{content:attr(data-duration);position:absolute;z-index:3;right:12px;bottom:10px;border:0;background:none;padding:0;color:#fff;font:500 14px/1.3 Kanit,'Microsoft YaHei',sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000b;pointer-events:none}
@media(max-width:1250px){#works .wg-filter-panel{overflow-x:auto;scrollbar-width:none}#works .wg-filter-panel::-webkit-scrollbar{display:none}#works .wg-filter{flex:0 0 auto}}
#work-dialog .dialog-art video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:transparent}
#work-dialog .dialog-art video[hidden]{display:none}
#work-dialog[data-media=video] .dialog-art,#work-dialog[data-media=video] .dialog-art video{touch-action:manipulation}
#work-dialog[data-media=video] #dialog-work-image{visibility:hidden;pointer-events:none}
#work-dialog[data-media=video] .viewer-image-outgoing,#work-dialog[data-media=video] .viewer-navigation,#work-dialog[data-media=video] .viewer-zoom-help{display:none!important}
#work-dialog .video-controls{position:absolute;z-index:5;left:50%;bottom:max(var(--video-controls-bottom,16px),env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(var(--video-controls-width,760px),calc(100% - 24px));min-height:64px;padding:9px 14px;border:1px solid #ffffff30;border-radius:999px;background:#383a3cbf;color:#f9fafb;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);box-shadow:inset 0 1px 0 #ffffff12,0 8px 28px #0003;transition:opacity 160ms}
#work-dialog .video-controls[hidden]{display:none}
#work-dialog[data-phase=opening] .video-controls,#work-dialog[data-phase=closing] .video-controls{opacity:0;pointer-events:none}
#work-dialog .video-action{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:0;padding:8px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background-color 140ms}
#work-dialog .video-action:hover{background:#ffffff14}
#work-dialog .video-action:focus-visible{outline:2px solid #fff;outline-offset:2px}
#work-dialog .video-icon{display:block;width:26px;height:26px;color:inherit;background:currentColor;-webkit-mask:var(--video-icon) center/contain no-repeat;mask:var(--video-icon) center/contain no-repeat;pointer-events:none}
#work-dialog [data-video-action=play]{--video-icon:var(--video-icon-play)}
#work-dialog .video-controls[data-playing=true] [data-video-action=play]{--video-icon:var(--video-icon-pause)}
#work-dialog [data-video-action=volume]{--video-icon:var(--video-icon-volume)}
#work-dialog .video-controls[data-volume-level=low] [data-video-action=volume]{--video-icon:var(--video-icon-volume-low)}
#work-dialog .video-controls[data-volume-level=medium] [data-video-action=volume]{--video-icon:var(--video-icon-volume-medium)}
#work-dialog .video-controls[data-muted=true] [data-video-action=volume]{--video-icon:var(--video-icon-muted)}
#work-dialog [data-video-action=fullscreen]{--video-icon:var(--video-icon-fullscreen)}
#work-dialog .video-controls[data-fullscreen=true] [data-video-action=fullscreen]{--video-icon:var(--video-icon-exit-fullscreen)}
#work-dialog .video-seek{position:relative;display:grid;align-items:center;flex:1;min-width:40px;height:44px}
#work-dialog .video-progress-track{height:6px;overflow:hidden;border-radius:999px;background:#ffffff4d;pointer-events:none}
#work-dialog .video-progress-fill{display:block;width:100%;height:100%;border-radius:inherit;background:#f1f5f5;transform:scaleX(var(--video-progress,0));transform-origin:left;pointer-events:none}
#work-dialog .video-progress{position:absolute;inset:0;width:100%;height:44px;min-width:0;margin:0;padding:0;appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;touch-action:none}
#work-dialog .video-progress:disabled{cursor:wait;opacity:.5}
#work-dialog .video-progress:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
#work-dialog .video-progress::-webkit-slider-runnable-track{height:6px;border:0;background:transparent}
#work-dialog .video-progress::-webkit-slider-thumb{width:14px;height:14px;margin-top:-4px;appearance:none;-webkit-appearance:none;border:0;border-radius:50%;background:#fff;opacity:0}
#work-dialog .video-progress:hover::-webkit-slider-thumb,#work-dialog .video-progress:focus-visible::-webkit-slider-thumb,#work-dialog [data-seeking] .video-progress::-webkit-slider-thumb{opacity:1}
#work-dialog .video-progress::-moz-range-track{height:6px;border:0;background:transparent}
#work-dialog .video-progress::-moz-range-progress{background:transparent}
#work-dialog .video-progress::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
#work-dialog .video-volume{position:relative;flex:0 0 44px}
#work-dialog .video-volume-popover{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);display:grid;place-items:center;width:56px;padding:12px 5px;border:1px solid #ffffff30;border-radius:999px;background:#333638f2;color:inherit;box-shadow:0 8px 24px #0005}
#work-dialog .video-volume-popover[hidden]{display:none}
#work-dialog .video-volume-seek{position:relative;display:grid;justify-items:center;width:44px;height:116px}
#work-dialog .video-volume-track{width:5px;height:100%;overflow:hidden;border-radius:999px;background:#ffffff4d;pointer-events:none}
#work-dialog .video-volume-fill{display:block;width:100%;height:100%;background:#f9fafb;transform:scaleY(var(--video-volume,1));transform-origin:bottom;pointer-events:none}
#work-dialog .video-volume-range{position:absolute;inset:0;width:44px;height:100%;min-width:0;margin:0;padding:0;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:none}
#work-dialog .video-volume-range:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
#work-dialog .video-volume-range::-webkit-slider-runnable-track{width:5px;height:100%;border:0;background:transparent}
#work-dialog .video-volume-range::-webkit-slider-thumb{width:13px;height:13px;margin:0 0 0 -4px;appearance:none;-webkit-appearance:none;border:0;border-radius:50%;background:#fff}
#work-dialog .video-volume-range::-moz-range-track{width:5px;height:100%;border:0;background:transparent}
#work-dialog .video-volume-range::-moz-range-progress{background:transparent}
#work-dialog .video-volume-range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
#work-dialog .dialog-art:fullscreen{width:100vw!important;height:100dvh!important;margin:0;padding:0;background:#000}
#work-dialog .dialog-art::backdrop{background:#000}
#work-dialog .dialog-video-message{position:absolute;z-index:6;left:50%;bottom:96px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);padding:10px 14px;border-radius:12px;background:#101010;color:#ededed;font-size:14px;line-height:1.5}
#work-dialog .dialog-video-message[hidden],#work-dialog .dialog-video-message button[hidden]{display:none}
#work-dialog .dialog-video-message button{min-width:44px;min-height:44px;padding:0 12px;border:1px solid #ffffff40;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
@media(max-width:600px){#works .wg-image-button[data-video]::before{width:60px;height:60px}#works .wg-image-button[data-video]::after{width:25px;height:25px}#work-dialog .video-controls{min-height:56px;padding:5px 8px;gap:4px}#work-dialog .video-icon{width:24px;height:24px}}
/* Phones and touch tablets use their hardware volume controls. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px), (min-width:768px) and (max-width:1366px) and (pointer:coarse) {
  #work-dialog .video-volume { display:none; }
}
@media(prefers-reduced-motion:reduce){#work-dialog .video-controls,#work-dialog .video-action,#works .wg-image-button[data-video]::before{transition:none}}