.zan-office{--zan-oc-px:50%;--zan-oc-py:50%;--zan-oc-bx:50%;--zan-oc-by:50%;--zan-oc-fl:.5;--zan-oc-ft:.5;--zan-oc-tilt-x:0deg;--zan-oc-tilt-y:0deg;--zan-oc-o:0;perspective:1100px;position:relative}.zan-office.is-active{--zan-oc-o:1}.zan-office-card{z-index:1;background-color:var(--color-bg);background-image:linear-gradient(152deg, color-mix(in oklab, var(--color-brand-soft) 75%, var(--color-bg)) 0%, var(--color-bg) 58%);transform:rotateX(var(--zan-oc-tilt-x)) rotateY(var(--zan-oc-tilt-y));transition:transform .9s var(--ease-out-expo), box-shadow .45s ease;box-shadow:0 1px 2px #0000000a, calc(var(--zan-oc-fl) * 18px - 9px) calc(var(--zan-oc-ft) * 18px + 8px) 38px -20px #0003;will-change:transform;position:relative}.zan-office.is-active .zan-office-card{transition:box-shadow .45s}.zan-office.is-entering .zan-office-card{transition:transform .18s ease-out,box-shadow .45s}.zan-office-sheen,.zan-office-glare{border-radius:inherit;pointer-events:none;transition:opacity .5s;position:absolute;inset:0}.zan-office-sheen{background-image:linear-gradient(115deg, transparent 30%, color-mix(in oklab, var(--color-brand) 6%, transparent) 44%, color-mix(in oklab, var(--color-brand) 10%, transparent) 50%, color-mix(in oklab, var(--color-brand) 6%, transparent) 56%, transparent 70%);background-size:260% 260%;background-position:var(--zan-oc-bx) var(--zan-oc-by);opacity:var(--zan-oc-o)}.zan-office-glare{background-image:radial-gradient(farthest-corner circle at var(--zan-oc-px) var(--zan-oc-py), #fffffff2 0%, #fff6 20%, #fff0 48%);opacity:calc(.9 * var(--zan-oc-o))}.zan-office-content{transform:translate3d(calc(var(--zan-oc-fl) * -6px + 3px), calc(var(--zan-oc-ft) * -6px + 3px), 0);position:relative}