.works-page{color:#f4f4f0;background:#161919;min-height:100svh;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}.works-header{z-index:30;background:#161919;justify-content:space-between;align-items:center;width:min(1440px,92%);min-height:92px;margin:auto;display:flex;position:relative}.works-header .works-wordmark{letter-spacing:-1px;color:#f2f0e9;padding:10px 0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:30px;font-style:normal;font-weight:500;line-height:1.1;text-decoration:none;display:inline-block}.works-header .other-works-trigger{color:#bbbfb9}.works-main{width:min(1440px,92%);margin:auto;padding:8px 0 48px}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.works-project{isolation:isolate;min-width:0;text-decoration:none;display:block;container-type:inline-size}.works-project-image{aspect-ratio:1.6;background:#262b2b;border-radius:3px;position:relative;overflow:hidden}.works-cover{object-fit:cover;width:100%;height:100%;transition:transform .65s cubic-bezier(.2,.65,.3,1);display:block}.works-project-image:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0009);position:absolute;inset:45% 0 0}.works-project-image:before{content:"";z-index:1;opacity:0;pointer-events:none;background:linear-gradient(#080c1020,#080c10db);transition:opacity .3s;position:absolute;inset:0}.works-project-myosense .works-cover{object-position:center}.works-project-myosense .works-project-image:after{inset:55% 0 0}.works-project-vivatrace .works-project-image{background:#ecf0f8}.works-project-vivatrace .works-cover{object-position:top center}.works-project-vivatrace .works-project-image:after{background:linear-gradient(#0000,#101d3fcc);inset:45% 0 0}.works-caption{z-index:2;pointer-events:none;position:absolute;bottom:24px;left:30px;right:30px}.works-brand{align-items:center;height:56px;display:flex}.works-logo{object-fit:contain;object-position:left center;flex-shrink:0;width:185px;max-width:100%;height:auto;max-height:56px;display:block}.works-project-myosense .works-logo{width:250px}.works-project-cairn .works-logo{width:200px}.works-project-sonicweb .works-logo{width:176px}.works-project-lingyuan .works-logo{width:150px}.works-project-virtuoso .works-logo{width:175px}.works-viva-wordmark{letter-spacing:-1.8px;color:#fff;font-size:42px;font-weight:600;line-height:1;display:block}.works-viva-wordmark>span{font-weight:400}.works-hover-info{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1),opacity .25s,transform .32s;display:grid;overflow:hidden;transform:translateY(8px)}.works-hover-inner{min-height:0;overflow:hidden}.works-hover-inner h2{letter-spacing:-.025em;color:#fff;margin:14px 0 10px;font-size:clamp(19px,4.35cqw,27px);font-weight:400;line-height:1.5}.works-slogan-phrase{display:inline-block}.works-hover-inner .project-skills{color:#deded8;letter-spacing:0;flex-wrap:nowrap;gap:clamp(4px,1.4cqw,10px);max-width:100%;margin:0;font-size:clamp(9px,3cqw,12px);line-height:1.7;display:flex}.works-hover-inner .project-skill{white-space:nowrap;flex:none}.works-hover-inner .project-skill-hash{color:#aaafa9}.works-project-open{z-index:2;color:#fff;opacity:.75;transition:opacity .2s;position:absolute;top:22px;right:22px}.works-project-open>span{display:none}.works-project-open i{place-items:center;width:32px;height:32px;font:24px/1 Arial;display:grid}:is(.works-project:hover .works-cover,.works-project:focus-visible .works-cover){transform:scale(1.025)}:is(.works-project:hover .works-hover-info,.works-project:focus-visible .works-hover-info){opacity:1;grid-template-rows:1fr;transform:none}.works-project:hover .works-project-image:before,.works-project:hover .works-project-open{opacity:1}.works-project:focus-visible .works-project-image:before{opacity:1}.works-page a:focus-visible{outline-offset:6px;outline:2px solid #eee9d9}@media (max-width:1050px){.works-grid{gap:20px}.works-caption{left:24px;right:24px}.works-hover-inner h2{font-size:20px}}@media (max-width:860px){.works-grid{grid-template-columns:1fr;gap:20px}.works-hover-inner h2{font-size:clamp(20px,4cqw,27px)}}@media (max-width:600px){.works-header{width:90%;min-height:82px}.works-header .works-wordmark{letter-spacing:-.8px;font-size:28px}.works-main{width:90%;padding:6px 0 28px}.works-grid{gap:18px}.works-caption{bottom:24px;left:22px;right:22px}.works-brand{height:52px}.works-project-open{top:14px;right:14px}.works-project-myosense .works-logo{width:225px}.works-viva-wordmark{font-size:39px}.works-project-cairn .works-logo{width:190px}.works-project-sonicweb .works-logo{width:166px}.works-project-lingyuan .works-logo{width:142px}.works-project-virtuoso .works-logo{width:160px}.works-hover-inner h2{font-size:19px}}@media (hover:none){.works-hover-info{opacity:1;grid-template-rows:1fr;transform:none}.works-project-image:before{opacity:1}.works-project-image{aspect-ratio:1.25}}@media (prefers-reduced-motion:reduce){.works-cover,.works-hover-info,.works-project-image:before,.works-project-open{transition:none}:is(.works-project:hover .works-cover,.works-project:focus-visible .works-cover){transform:none}}@media (max-width:600px){.works-project-image{aspect-ratio:1.35}}@media (max-width:360px){.works-project-myosense .works-logo{width:205px}.works-viva-wordmark{font-size:36px}.works-project-image{aspect-ratio:1.25}}
