/* assets/ui/work-video-viewer.css */
: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}}


/* assets/ui/file-safe-icons.css */
/* Existing artwork embedded verbatim so masks also render in file:// previews. */
:root{
  --portfolio-chevron-mask: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%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m9%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E');
  --portfolio-contact-qr-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%0A%20%20%3Cpath%20d%3D%22M489.6%20489.8H198.4c-37.1%200-67.2-30.1-67.2-67.2v-224c0-37.1%2030.1-67.2%2067.2-67.2h224c37.1%200%2067.2%2030.1%2067.2%2067.2v291.2z%20m-268.8-89.6H400V221H220.8v179.2zM825.6%20489.8H534.4V198.6c0-37.1%2030.1-67.2%2067.2-67.2h224c37.1%200%2067.2%2030.1%2067.2%2067.2v224c0%2037.1-30.1%2067.2-67.2%2067.2zM624%20400.2h179.2V221H624v179.2zM422.4%20893h-224c-37.1%200-67.2-30.1-67.2-67.2v-224c0-37.1%2030.1-67.2%2067.2-67.2h291.2v291.2c0%2037.1-30.1%2067.2-67.2%2067.2z%20m-201.6-89.6H400V624.2H220.8v179.2zM534.4%20534.6h134.4V669H534.4z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M646.4%20646.6h134.4V781H646.4z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M758.4%20534.6h134.4V669H758.4zM534.4%20758.6h134.4V893H534.4zM758.4%20758.6h134.4V893H758.4z%22%2F%3E%0A%3C%2Fsvg%3E');
  --portfolio-works-grid-mask: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%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%226.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E');
  --portfolio-works-ring-mask: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.8%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227.6%22%2F%3E%3C%2Fsvg%3E');
}
.closing-top-icon,.menu-list a::after,.experience-arrow::after,#works .wg-collapse-icon,#work-dialog .viewer-browse-icon,.experience-return span,.sling-button__hint-arrow{
  -webkit-mask:var(--portfolio-chevron-mask) center/contain no-repeat;
  mask:var(--portfolio-chevron-mask) center/contain no-repeat;
}
.sling-button__icon{
  -webkit-mask:var(--portfolio-contact-qr-mask) center/contain no-repeat;
  mask:var(--portfolio-contact-qr-mask) center/contain no-repeat;
}
#works .wg-view-icon{--wg-view-icon:var(--portfolio-works-grid-mask)}
#works [data-work-view=ring] .wg-view-icon{--wg-view-icon:var(--portfolio-works-ring-mask)}

/* assets/ui/site-refinements.css */
/* Project cards keep dragging reserved for gallery navigation. */
#projects .pg-card,#projects .pg-card *{-webkit-user-select:none;user-select:none}
/* Selection is disabled throughout this portfolio, including lazy viewer content. */
html,html *,html *::before,html *::after{-webkit-user-select:none!important;user-select:none!important}
::selection{background:transparent;color:inherit}
/* The solid return circle follows the viewer's dark neutral controls. */
#experience-viewer .experience-return{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;gap:0;border:0;border-radius:50%;background:#191919;color:#ededed;transition:background-color .2s,color .2s}
#experience-viewer .experience-return:hover{background:#292929;color:#fff}
#experience-viewer .experience-return span{width:18px;height:18px}
/* Match the tallest card in the desktop row; stacked layouts retain natural height. */
@media(min-width:768px) and (orientation:landscape){#projects .pg-viewport{align-items:stretch}}
/* Keyboard states are independent of hover and remain visible on dark surfaces. */
body :is(a[href],button:enabled,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid #ededed;outline-offset:4px}
#works .wg-filter:focus-visible{outline-offset:-4px;outline-color:#ededed;box-shadow:0 0 0 2px #050505}
#works .wg-filter[aria-pressed=true]:focus-visible{outline-color:#151515;box-shadow:0 0 0 2px #ededed}
.contact-effort:has(.effort-input:focus-visible) .effort-stage{outline:2px solid #ededed;outline-offset:4px}
.quiet-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid #ffffff38;border-radius:999px;background:#161616d9;color:#dedede;font:400 12px/1.4 Kanit,'Microsoft YaHei',sans-serif;white-space:nowrap;cursor:pointer;transition:background-color 150ms,color 150ms}
.quiet-motion-toggle:hover{background:#292929;color:#fff}
.quiet-motion-toggle:disabled{cursor:default;opacity:.6}
.quiet-motion-toggle svg{display:block;width:15px;height:15px;flex:none;fill:currentColor}
.quiet-motion-toggle .motion-play{display:none}
.quiet-motion-toggle[data-paused=true] .motion-play{display:block}
.quiet-motion-toggle[data-paused=true] .motion-pause{display:none}
.pg-controls{gap:10px;flex-wrap:wrap}
.pg-contribution{margin:18px 0 0;color:#bcbcbc;font-size:14px;line-height:1.75}
.pg-contribution-label{display:block;margin-bottom:4px;color:#ededed;font-size:11px;font-weight:500;letter-spacing:.08em}
/* The lifted category stage must not intercept the toolbar's lower hit cells. */
#works .works-toolbar{position:relative;z-index:1}
#works .works-gallery{isolation:isolate}
@media(min-width:901px){#works .wg-space[data-view=ring]{--wg-scene-height:min(clamp(620px,56vw,900px),max(280px,calc(100dvh - 184px)))}}
@media(max-width:600px){.pg-contribution{font-size:13px;margin-top:16px}.quiet-motion-toggle{padding-inline:11px}}
@media(prefers-reduced-motion:reduce){.quiet-motion-toggle{transition:none}}

/* Desktop keeps its existing hover and keyboard pause behavior. */
@media(hover:hover) and (pointer:fine){.pg-autoplay{display:none}}

/* assets/ui/category-disclosure.css */
/* The panel's layout size never animates: only the visible capsule and its tabs do. */
#works .wg-filter-panel[data-disclosure-ready]{--wg-disclosure-time:380ms;width:var(--wg-disclosure-width);height:var(--wg-disclosure-height);flex:0 0 auto;overflow:hidden;scrollbar-width:none;background:#303030;clip-path:inset(0 var(--wg-disclosure-clip-right,0px) 0 0 round 999px);transition:clip-path var(--wg-disclosure-time) cubic-bezier(.16,1,.3,1);-webkit-mask-image:none;mask-image:none}
#works .wg-filter-panel[data-disclosure-ready][data-disclosure-expanded=false]{--wg-disclosure-time:560ms}
#works .wg-filter-panel[data-disclosure-ready][data-disclosure-expanded=true][data-filter-scrollable]{overflow-x:auto;overflow-y:hidden}
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter{position:absolute;left:0;top:0;flex:none;width:var(--wg-filter-width);height:var(--wg-filter-height);min-width:0;transform:translate3d(var(--wg-filter-x),var(--wg-filter-y),0);transition:transform var(--wg-disclosure-time) cubic-bezier(.16,1,.3,1),opacity 170ms ease,color 220ms,background-color 220ms;opacity:1;color:#ddd}
/* Invisible rectangular cells cover the gutters without changing the painted pill. */
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter::before{content:'';position:absolute;top:calc(-1 * var(--wg-filter-y));bottom:calc(-1 * var(--wg-filter-y));left:calc(-1 * var(--wg-filter-hit-left,0px));right:calc(-1 * var(--wg-filter-hit-right,0px));border-radius:0;background:transparent;pointer-events:inherit}
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter[data-disclosure-hidden]::before{pointer-events:none}
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter[aria-pressed=true]{color:#111}
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter[data-disclosure-hidden]{opacity:0;pointer-events:none}
#works .wg-filter-panel[data-disclosure-ready]>.wg-filter-indicator[data-ready]{transition:transform var(--wg-disclosure-time) cubic-bezier(.16,1,.3,1),width var(--wg-disclosure-time) cubic-bezier(.16,1,.3,1),height 150ms ease}
#works .wg-filter-measure{position:fixed;left:-10000px;top:0;display:flex;align-items:stretch;width:max-content;visibility:hidden;pointer-events:none}
#works .wg-filter-measure>.wg-filter{position:static!important;flex:none!important;width:max-content!important;height:auto!important;transform:none!important;opacity:1!important;transition:none!important;min-width:0}
#works .wg-filter-panel[data-disclosure-ready]::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){#works .wg-filter-panel[data-disclosure-ready],#works .wg-filter-panel[data-disclosure-ready]>.wg-filter,#works .wg-filter-panel[data-disclosure-ready]>.wg-filter-indicator[data-ready]{transition:none}}